Bug 193567 - ::before/::after elements not filling their grid cell when container has display: contents
Summary: ::before/::after elements not filling their grid cell when container has disp...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Mac iOS 12
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks: 148695
  Show dependency tree / graph
 
Reported: 2019-01-18 00:35 PST by Michał Gołębiowski-Owczarek
Modified: 2019-11-06 15:33 PST (History)
15 users (show)

See Also:

Attachments
A test case (876 bytes, text/html)
2019-01-18 00:35 PST, Michał Gołębiowski-Owczarek 		no flags Details
Expected output (Chrome, Firefox) (22.71 KB, image/png)
2019-01-18 01:21 PST, Michał Gołębiowski-Owczarek 		no flags Details
Buggy output (Safari) (18.50 KB, image/png)
2019-01-18 01:21 PST, Michał Gołębiowski-Owczarek 		no flags Details
patch (8.76 KB, patch)
2019-10-30 06:11 PDT, Antti Koivisto 		no flags Details | Formatted Diff | Diff
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 Michał Gołębiowski-Owczarek 2019-01-18 00:35:17 PST 
Created attachment 359457 [details]
A test case

When a CSS Grid container has a child with `display: contents` with styled ::before/::after, the ::before/::after elements are not displayed.

The problem exists in Safari Technology Preview & Safari 12 as well as iOS 12.

See the test case: https://codepen.io/mgol/pen/vvqKpL
Comment 1 Michał Gołębiowski-Owczarek 2019-01-18 00:37:06 PST 
Adding `display: block` to the ::before/::after styles fixes the issue.

The original test case works fine in Chrome 71 & Firefox 64. Edge doesn't support `display: contents` so it won't work there.
Comment 2 Michał Gołębiowski-Owczarek 2019-01-18 00:46:51 PST 
This broke a cool Slack logo on Grid demo by Ana Tudor she posted on Twitter:
https://codepen.io/thebabydino/pen/rogQZb
https://twitter.com/anatudor/status/1085994803173699588
Comment 3 Michał Gołębiowski-Owczarek 2019-01-18 01:21:12 PST 
Created attachment 359460 [details]
Expected output (Chrome, Firefox)
Comment 4 Michał Gołębiowski-Owczarek 2019-01-18 01:21:34 PST 
Created attachment 359461 [details]
Buggy output (Safari)
Comment 5 Antti Koivisto 2019-10-30 06:11:15 PDT 
Created attachment 382299 [details]
patch
Comment 6 WebKit Commit Bot 2019-10-30 10:52:07 PDT 
Comment on attachment 382299 [details]
patch

Clearing flags on attachment: 382299

Committed r251780: <https://trac.webkit.org/changeset/251780>
Comment 7 WebKit Commit Bot 2019-10-30 10:52:09 PDT 
All reviewed patches have been landed.  Closing bug.
Comment 8 Radar WebKit Bug Importer 2019-10-30 10:53:17 PDT 
<rdar://problem/56750457>