Bug 233397 - Using display:grid inside div with column-count does not render properly, cuts text in half
Summary: Using display:grid inside div with column-count does not render properly, cut...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Intel) macOS 12
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-11-20 08:47 PST by Craig
Modified: 2021-11-27 08:48 PST (History)
4 users (show)

See Also:

Attachments
Example html file which reproduces the bug (1019 bytes, text/html)
2021-11-20 08:47 PST, Craig 		no flags Details
Screenshot of the incorrectly rendered HTML (22.14 KB, image/jpeg)
2021-11-20 08:49 PST, Craig 		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 Craig 2021-11-20 08:47:10 PST 
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.
Comment 1 Craig 2021-11-20 08:49:34 PST 
Created attachment 444899 [details]
Screenshot of the incorrectly rendered HTML
Comment 2 Radar WebKit Bug Importer 2021-11-27 08:48:20 PST 
<rdar://problem/85780282>