Bug 287279

Summary: Safari does not respect `break-*: column` if it would cause the generated box to be "empty".
Product: WebKit Reporter: deanvelopermn
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bfulgham, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 18   
Hardware: Unspecified   
OS: Unspecified   

deanvelopermn
Reported 2025-02-07 12:07:25 PST
Minimum reproducible example: ``` <div style="column-count: 2"> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div style="break-before: column"></div> </div> ``` Expected behavior: All ten divs should appear in the first column, second column should contain the <div style="break-before: column"> Actual behavior: The 10 divs get split into left/right columns, 5 on each side. # Other examples ``` <div style="column-count: 2"> <div>some text</div> <div>some text</div> <div>some text</div> <div style="break-before: column"></div> <div></div> </div> ``` Expected: 3 "some text"s in first column, empty div in second column. Actual: 2 "some text" in first column, 1 "some text", and the two empty divs in second column. ``` <div id="app" style="column-count: 3"> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div style="break-before: column"></div> <div>some text</div> <div style="break-before: column"></div> </div> ``` Expected: 5 "some text" in first column, 1 "some text" in second column, <div style="break-before: column"> in the 3rd column. Actual: 3 in first column, 2 in second column, 1 in third column. ``` <div id="app" style="column-count: 3"> <div style="break-after: column"></div> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div>some text</div> <div style="break-before: column"></div> </div> ``` Expected: Empty first column, 6 "some text" in 2nd column, <div style="break-before: column"> in the 3rd column Actual: 3 in first column, 3 in second column, i assume <div style="break-before: column"> in the third column, but Safari DevTools make this difficult to analyze since it doesn't seem to show the placement of zero-area elements.
Attachments
Radar WebKit Bug Importer
Comment 1 2025-02-14 12:08:18 PST
Note You need to log in before you can comment on or make changes to this bug.