Bug 197162 - margin-top is ignored on elements with zero-height (and clear set) if they appear after floating elements
Summary: margin-top is ignored on elements with zero-height (and clear set) if they ap...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 12
Hardware: Mac macOS 10.14
: P2 Normal
Assignee: zalan
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-04-22 09:47 PDT by Brad Andalman
Modified: 2023-03-21 10:48 PDT (History)
6 users (show)

See Also:


Attachments
The html that exhibits the bug (2.26 KB, text/html)
2019-04-22 09:47 PDT, Brad Andalman
no flags Details
A screenshot of Chrome which does NOT exhibit the bug (152.83 KB, image/png)
2019-04-22 09:48 PDT, Brad Andalman
no flags Details
The broken behavior in Safari on Ventura (366.87 KB, image/png)
2023-03-20 10:55 PDT, Brad Andalman
no flags Details
Test reduction (237 bytes, text/html)
2023-03-20 11:27 PDT, zalan
no flags Details
Patch (8.36 KB, patch)
2023-03-20 20:31 PDT, zalan
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Brad Andalman 2019-04-22 09:47:48 PDT
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.
Comment 1 Brad Andalman 2019-04-22 09:48:38 PDT
Created attachment 367945 [details]
A screenshot of Chrome which does NOT exhibit the bug
Comment 2 Radar WebKit Bug Importer 2019-04-22 10:35:07 PDT
<rdar://problem/50098403>
Comment 3 Ahmad Saleem 2023-03-17 17:33:01 PDT
If I am not wrong, I am not able to reproduce this in WebKit ToT (261814@main), is this IFC progression? @Alan?
Comment 4 zalan 2023-03-18 06:10:46 PDT
I wish there was a "broken" screenshot too. I don't seem to be able to reproduce it either.
Comment 5 Brad Andalman 2023-03-20 10:55:54 PDT
Created attachment 465524 [details]
The broken behavior in Safari on Ventura

I’m attaching a screenshot of the broken behavior using Safari on Ventura.
Comment 6 zalan 2023-03-20 11:07:22 PDT
(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.
Comment 7 zalan 2023-03-20 11:14:26 PDT
Oh that spacer! Yeah, ok, this bug has clearly not been fixed. Reopening.
Comment 8 Brad Andalman 2023-03-20 11:15:07 PDT
Oh, bummer! I got excited.

Thanks for double-checking, though.
Comment 9 zalan 2023-03-20 11:21:29 PDT
(In reply to Brad Andalman from comment #8)
> Oh, bummer! I got excited.
> 
> Thanks for double-checking, though.
:| looking into it now.
Comment 10 zalan 2023-03-20 11:27:39 PDT
Created attachment 465525 [details]
Test reduction
Comment 11 zalan 2023-03-20 20:31:09 PDT
Created attachment 465533 [details]
Patch
Comment 12 Brad Andalman 2023-03-21 09:14:46 PDT
Wow! Thanks, zalan!
Comment 13 Ahmad Saleem 2023-03-21 09:50:23 PDT
Alan -> WebKit Layout Super Hero for rescue on another bug.. Thanks Alan!!
Comment 14 EWS 2023-03-21 10:47:47 PDT
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].