Bug 193567

Summary:

::before/::after elements not filling their grid cell when container has display: contents

Product:

WebKit

Reporter:

Michał Gołębiowski-Owczarek <m.goleb+bugzilla>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

709922234, allan.jensen, commit-queue, esprehn+autocc, ews-watchlist, glenn, gyuyoung.kim, koivisto, macpherson, menard, rniwa, saam, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

Mac

OS:

iOS 12

Bug Depends on:

Bug Blocks:

148695

Attachments:

Description	Flags
A test case	none
Expected output (Chrome, Firefox)	none
Buggy output (Safari)	none
patch	none

Michał Gołębiowski-Owczarek

Reported 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

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 attachment proposed patch, testcase, etc.

Michał Gołębiowski-Owczarek

Comment 1 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.

Michał Gołębiowski-Owczarek

Comment 2 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

Michał Gołębiowski-Owczarek

Comment 3 2019-01-18 01:21:12 PST

Created attachment 359460 [details] Expected output (Chrome, Firefox)

Michał Gołębiowski-Owczarek

Comment 4 2019-01-18 01:21:34 PST

Created attachment 359461 [details] Buggy output (Safari)

Antti Koivisto

Comment 5 2019-10-30 06:11:15 PDT

Created attachment 382299 [details] patch