Bug 281744 – floating elements break out of container

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Layout and Rendering

[Johannes Odland]

Created attachment 472983 [details]
Screenshot of issue in Safari 18.0.1

Minimal testcase: https://johannesodland.github.io/browserbugs/2024/safari-float-issue.html

In a container with elements that are floated to the left, if one element is pulled outside the container, the remaining floated elements stack to the right. 

This breaks legacy grid containers.

[Johannes Odland]

Created attachment 472984 [details]
Screenshot of expected rendering (Chrome)

[Radar WebKit Bug Importer]

<rdar://problem/138196737>

[Ahmad Saleem]

@Johannes - can you try with Safari Technology Preview, it seems that it is already fixed. Appreciate if you can confirm. Thanks!

[Johannes Odland]

Created attachment 472988 [details]
Screenshot of issue in Safari TP Release 205 (Safari 18.0, WebKit 19621.1.2.111.4)

@Ahmad I did check in Safari TP before filing. 
Release 205 (Safari 18.0, WebKit 19621.1.2.111.4) 

I can reproduce the issue there as well, see the attached screenshot.

[Ahmad Saleem]

(In reply to Johannes Odland from comment #4)
> Created attachment 472988 [details]
> Screenshot of issue in Safari TP Release 205 (Safari 18.0, WebKit
> 19621.1.2.111.4)
> 
> @Ahmad I did check in Safari TP before filing. 
> Release 205 (Safari 18.0, WebKit 19621.1.2.111.4) 
> 
> I can reproduce the issue there as well, see the attached screenshot.

Can you share steps on how you are reproducing it? Plus also your machine details? Whether it is on macOS Sequoia, Sonoma or Ventura?

[Johannes Odland]

Steps is: 
1. open https://johannesodland.github.io/browserbugs/2024/safari-float-issue.html

Expected result is as in Chrome and Firefox
Actual result is as in the provided screenshot form Safari / Safari TP.

I am still on Sonoma.

[Ahmad Saleem]

(In reply to Johannes Odland from comment #6)
> Steps is: 
> 1. open
> https://johannesodland.github.io/browserbugs/2024/safari-float-issue.html
> 
> Expected result is as in Chrome and Firefox
> Actual result is as in the provided screenshot form Safari / Safari TP.
> 
> I am still on Sonoma.

Thanks for sharing details, I am able to reproduce it with Ventura as well.

[Johannes Odland]

Any chance this can be prioritized?

It is a regression that easily breaks float-based grids, something many sites still rely on.

[Ahmad Saleem]

(In reply to Johannes Odland from comment #8)
> Any chance this can be prioritized?
> 
> It is a regression that easily breaks float-based grids, something many
> sites still rely on.

Please share any or few live web sites broken with the following bug, it would definitely help in understanding the impact.

[Johannes Odland]

Created attachment 472995 [details]
Screengrab of article from 2015 that now fails

I know this bug breaks the feature article template in the public service broadcaster in Norway where I work. 

10+ years of articles partly fail and render sideways: 

https://www.nrk.no/dokumentar/xl/_-fantasy-leserne-kommer-til-a-redde-verden-1.12622225

[Ahmad Saleem]

(In reply to Johannes Odland from comment #10)
> Created attachment 472995 [details]
> Screengrab of article from 2015 that now fails
> 
> I know this bug breaks the feature article template in the public service
> broadcaster in Norway where I work. 
> 
> 10+ years of articles partly fail and render sideways: 
> 
> https://www.nrk.no/dokumentar/xl/_-fantasy-leserne-kommer-til-a-redde-verden-
> 1.12622225

Thanks! It helps.

[Johannes Odland]

Any chance this will be looked at in the near future?

The only fix we've found so far is to clear the element that triggers the bug. It's unsightly, but it's not as bad as the text floating out to the right.

[alan]

Hi, this looks to be progressed at https://commits.webkit.org/284247@main on trunk. I verified it both with the test case (thank you for taking the time to create one!) and the original article at https://www.nrk.no. Both pages look correct in Safari with 284247@main.

[alan]

*** This bug has been marked as a duplicate of bug 280063 ***