Bug 262349 - A floating element can cause another element’s "break-inside:avoid" to fail
Summary: A floating element can cause another element’s "break-inside:avoid" to fail
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 17
Hardware: Mac (Apple Silicon) macOS 13
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2023-09-28 17:35 PDT by Brad Andalman
Modified: 2023-10-05 17:36 PDT (History)
5 users (show)

See Also:

Attachments
HTML showing a paragraph that should not be split across two columns (2.89 KB, text/html)
2023-09-28 17:35 PDT, Brad Andalman 		no flags Details
rendering in Safari, firefox, chrome (338.31 KB, image/png)
2023-09-28 18:13 PDT, Karl Dubost 		no flags Details
HTML exhibiting the bug when float isn’t 100% (2.95 KB, text/html)
2023-09-29 11:29 PDT, Brad Andalman 		no flags Details
Float at 50% rendering in safari, chrome, firefox (876.11 KB, image/png)
2023-09-29 11:31 PDT, Brad Andalman 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Brad Andalman 2023-09-28 17:35:20 PDT 
Created attachment 467966 [details]
HTML showing a paragraph that should not be split across two columns

In the attached HTML, the <div> with the “callout” class is floating, but takes up 100% of the width. As a result, it pushes the following paragraph lower. Since that following paragraph has “break-inside:avoid” set, it should be moved to the next column. Instead, the paragraph is split across two columns. This is incorrect.

If you turn off “float: left” on the “callout” <div>, then you can see the correct behavior: the following paragraph moves to the next column.

I also tested in Google Chrome (Version 117.0.5938.132), and it behaves as expected there.
Comment 1 Karl Dubost 2023-09-28 18:13:09 PDT 
Created attachment 467967 [details]
rendering in Safari, firefox, chrome
Comment 2 Brad Andalman 2023-09-29 11:29:10 PDT 
Created attachment 467977 [details]
HTML exhibiting the bug when float isn’t 100%

My initial report mentioned that this happened when the floating element took up 100% of the width. This is how I discovered the bug. However, the same problem arises even when that isn’t the case.
Comment 3 Brad Andalman 2023-09-29 11:31:03 PDT 
Created attachment 467978 [details]
Float at 50% rendering in safari, chrome, firefox
Comment 4 Radar WebKit Bug Importer 2023-10-05 17:36:17 PDT 
<rdar://problem/116552125>