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

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>