Bug 262476

Summary:

clear:right on a left floating element breaks layout

Product:

WebKit

Reporter:

Johannes Odland <johannes.odland>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Major

CC:

ahmad.saleem792, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 17

Hardware:

Mac (Apple Silicon)

OS:

macOS 13

Attachments:

Description	Flags
Test-result in Safari 17	none
Test-result in Chrome	none

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.