Bug 262476 - clear:right on a left floating element breaks layout
Summary: clear:right on a left floating element breaks layout
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 17
Hardware: Mac (Apple Silicon) macOS 13
: P2 Major
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-10-02 04:04 PDT by Johannes Odland
Modified: 2023-10-09 06:54 PDT (History)
2 users (show)

See Also:


Attachments
Test-result in Safari 17 (14.24 KB, image/png)
2023-10-02 04:04 PDT, Johannes Odland
no flags Details
Test-result in Chrome (8.46 KB, image/png)
2023-10-02 04:05 PDT, Johannes Odland
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Johannes Odland 2023-10-02 04:04:51 PDT
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
Comment 1 Johannes Odland 2023-10-02 04:05:18 PDT
Created attachment 468020 [details]
Test-result in Chrome
Comment 2 Ahmad Saleem 2023-10-02 09:39:41 PDT
WebKit ToT (268726@main) seems to match Chrome Canary 119.
Comment 3 Johannes Odland 2023-10-02 11:17:07 PDT
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?
Comment 4 Ahmad Saleem 2023-10-02 11:18:39 PDT
(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.
Comment 5 Johannes Odland 2023-10-02 11:23:27 PDT
(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.
Comment 6 Radar WebKit Bug Importer 2023-10-09 04:05:13 PDT
<rdar://problem/116671741>
Comment 7 Ahmad Saleem 2023-10-09 06:54:51 PDT
Since it is fixed. Changing status rather than tracking.

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