Bug 262476 – clear:right on a left floating element breaks layout

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: CSS

[Johannes Odland]

Created attachment 468019 [details]
Test-result in Safari 17

Minimal test case: 
https://johannesodland.github.io/browserbugs/2023/safari-float-left-clear-right-issue.html

Test-case contains 4 left floated divs. 
The last div has `clear: right` set. 


When `clear:right` is set, the position of the previous elements seems to be disregarded, and the element is positioned right below the first floated element.

Expected result: 
The last div is placed below the three previous divs. The background is green.

Actual result: 
The last div is placed below the first floated div. The background is red.


This bug affects older sites with float-based layouts.d

[Johannes Odland]

Created attachment 468020 [details]
Test-result in Chrome

[Ahmad Saleem]

WebKit ToT (268726@main) seems to match Chrome Canary 119.

[Johannes Odland]

But is it web compatible?

This change is breaking layouts that have been working interoperable across browsers for a decade.

Also, according to float definition in CSS 2.2:
https://drafts.csswg.org/css2/#float-rules

> 2. If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

It can’t be positioned to the right of the previous box and should therefore be below, matching the behavior of Safari <= 16.x?

[Ahmad Saleem]

(In reply to Johannes Odland from comment #3)
> But is it web compatible?
> 
> This change is breaking layouts that have been working interoperable across
> browsers for a decade.
> 
> Also, according to float definition in CSS 2.2:
> https://drafts.csswg.org/css2/#float-rules
> 
> > 2. If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
> 
> It can’t be positioned to the right of the previous box and should therefore
> be below, matching the behavior of Safari <= 16.x?

What I am trying to suggest that the bug has been fixed on 'top of tree' or in latest WebKit builds and I tested it on build as of 268726@main on macOS Sonoma using Minibrowser.

[Johannes Odland]

(In reply to Ahmad Saleem from comment #4)
> What I am trying to suggest that the bug has been fixed on 'top of tree' or
> in latest WebKit builds and I tested it on build as of 268726@main on macOS
> Sonoma using Minibrowser.

I'm sorry, I misread. 
It indeed seems to be fixed in latest STP.

[Radar WebKit Bug Importer]

<rdar://problem/116671741>

[Ahmad Saleem]

Since it is fixed. Changing status rather than tracking.

Appreciate if someone can triage and add reference commit details, when it got fixed.