| 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: | P2 | 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: | |||
Created attachment 467967 [details]
rendering in Safari, firefox, chrome
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.
Created attachment 467978 [details]
Float at 50% rendering in safari, chrome, firefox
|
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.