| Summary: | margin-top is ignored on elements with zero-height (and clear set) if they appear after floating elements | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Brad Andalman <bya> | ||||||||||||
| Component: | Layout and Rendering | Assignee: | zalan <zalan> | ||||||||||||
| Status: | RESOLVED FIXED | ||||||||||||||
| Severity: | Normal | CC: | ahmad.saleem792, bfulgham, koivisto, simon.fraser, webkit-bug-importer, zalan | ||||||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||||||
| Version: | Safari 12 | ||||||||||||||
| Hardware: | Mac | ||||||||||||||
| OS: | macOS 10.14 | ||||||||||||||
| Attachments: |
|
||||||||||||||
Created attachment 367945 [details]
A screenshot of Chrome which does NOT exhibit the bug
If I am not wrong, I am not able to reproduce this in WebKit ToT (261814@main), is this IFC progression? @Alan? I wish there was a "broken" screenshot too. I don't seem to be able to reproduce it either. Created attachment 465524 [details]
The broken behavior in Safari on Ventura
I’m attaching a screenshot of the broken behavior using Safari on Ventura.
(In reply to Brad Andalman from comment #5) > Created attachment 465524 [details] > The broken behavior in Safari on Ventura > > I’m attaching a screenshot of the broken behavior using Safari on Ventura. Very much appreciated! Let me go back and check trunk again. Oh that spacer! Yeah, ok, this bug has clearly not been fixed. Reopening. Oh, bummer! I got excited. Thanks for double-checking, though. (In reply to Brad Andalman from comment #8) > Oh, bummer! I got excited. > > Thanks for double-checking, though. :| looking into it now. Created attachment 465525 [details]
Test reduction
Created attachment 465533 [details]
Patch
Wow! Thanks, zalan! Alan -> WebKit Layout Super Hero for rescue on another bug.. Thanks Alan!! Committed 261926@main (208379f2adf1): <https://commits.webkit.org/261926@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 465533 [details]. |
Created attachment 367944 [details] The html that exhibits the bug If you have elements that have a height of 0 but with margin-top and clear specified, then the margin-top will be ignored for all elements that appear after a floating element. It's worth reiterating that this happens whenever a zero-height element appears – even if one appears quite a bit later in the page, and far away from a floating element. I've included a simple html file that illustrates this behavior. As attached, the file includes a "spacer" div with "clear: both" specified. In the html, the spacer appears between each paragraph. When rendered in Safari, the spacer appears between each paragraph before the floating element, but completely disappears after. Though I've reported that this bug is in Safari 12, it also manifests in Safari Technology Preview. In Chrome, the page renders as we'd expect (space appears between each paragraph, always). If you comment out the "clear:both" then the space between the paragraphs appears in Safari. That means we lose the clear behavior, of course.