Bug 262349

Summary:

A floating element can cause another element’s "break-inside:avoid" to fail

Product:

WebKit

Reporter:

Brad Andalman <bya>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

bfulgham, karlcow, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 17

Hardware:

Mac (Apple Silicon)

OS:

macOS 13

See Also:

https://bugs.webkit.org/show_bug.cgi?id=185220

Attachments:

Description	Flags
HTML showing a paragraph that should not be split across two columns	none
rendering in Safari, firefox, chrome	none
HTML exhibiting the bug when float isn’t 100%	none
Float at 50% rendering in safari, chrome, firefox	none

Brad Andalman

Reported 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.

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 attachment proposed patch, testcase, etc.

Karl Dubost

Comment 1 2023-09-28 18:13:09 PDT

Created attachment 467967 [details] rendering in Safari, firefox, chrome

Brad Andalman

Comment 2 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.

Brad Andalman

Comment 3 2023-09-29 11:31:03 PDT

Created attachment 467978 [details] Float at 50% rendering in safari, chrome, firefox

Radar WebKit Bug Importer

Comment 4 2023-10-05 17:36:17 PDT

<rdar://problem/116552125>

Note You need to log in before you can comment on or make changes to this bug.