| Summary: | Using display:grid inside div with column-count does not render properly, cuts text in half | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Craig <craigbrown24> | ||||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | NEW --- | ||||||||
| Severity: | Normal | CC: | bfulgham, simon.fraser, webkit-bug-importer, zalan | ||||||
| Priority: | P2 | Keywords: | InRadar | ||||||
| Version: | Safari Technology Preview | ||||||||
| Hardware: | Mac (Intel) | ||||||||
| OS: | macOS 12 | ||||||||
| Attachments: |
|
||||||||
Created attachment 444899 [details]
Screenshot of the incorrectly rendered HTML
|
Created attachment 444898 [details] Example html file which reproduces the bug A two-column grid (using display: grid) inside of a two-column layout (using column-count: 2) renders incorrectly if the grid has an odd number of lines of text. Steps to reproduce: 1. Create a two-column grid (using display: grid) inside of a two-column layout (using column-count: 2). 2. Add content to the grid such that the grid will have an odd number of lines of text. -OR- Instead of 1 and 2 use the attached example HTML file. Actual result: The layout is rendered incorrectly. The top half of the middle line of text appears at the bottom of the left column, and the bottom half appears at the top of the right column. Expected results: The entire middle line should appear in the left column.