202576 2019-10-04 02:09:53 -0700 Transforming element with parent background-color fails if iframe with z-index -1 present in DOM 2020-01-14 14:59:49 -0800 1 1 1 Unclassified WebKit Compositing Safari 12 iPhone / iPad iOS 13 NEW InRadar P2 Normal --- 206262 1 daginge simon.fraser dino simon.fraser webkit-bug-importer oldest_to_newest 1576781 0 daginge 2019-10-04 02:09:53 -0700 Description: If an element has a parent with a background-color, and the element is transformed, the element does not behave as expected, and completely disappears in certain cases, should an iframe be present in the DOM which has a z-index of -1. This is not reproducible on older versions of iOS Safari. You can see the element if the background-color has an alpha channel. Steps to reproduce: - Navigate to https://cdpn.io/daginge/debug/dybLjGg/wQAPozPYQEDr on an iOS device - Observe that no text can be seen - Open https://cdpn.io/daginge/debug/dybLjGg/wQAPozPYQEDr on desktop Safari - Observe that text is there and mirrored Code: https://codepen.io/daginge/pen/dybLjGg Impact: Intercom messenger, which is present on a lot of pages, has a hidden iframe with z-index -1. When this iframe is added to the DOM, any element which is transformed will disappear if a parent has a background-color. This impacts us because we are dependent on Intercom for support, and run a video conferencing site which needs to transform the so called "self-view" 180deg on the Y-axis to avoid confusion when the user sees themselves. Workaround: If a parent element gets opacity 0.999 the issue disappears. We decided to add this on the affected component's wrapper so minimize other issues that might come from having the body SLIGHTLY less visible. 1577273 1 webkit-bug-importer 2019-10-06 17:45:15 -0700 <rdar://problem/56022948> 1577389 2 simon.fraser 2019-10-07 10:42:29 -0700 I can't view the test case ("This debug view expired"). 1577390 3 simon.fraser 2019-10-07 10:44:21 -0700 Ah, https://codepen.io/daginge/pen/dybLjGg works. I can reproduce. 1577414 4 daginge 2019-10-07 11:55:11 -0700 Yes, sorry about that. I wasn’t aware those expired :/ 1606613 5 simon.fraser 2020-01-14 14:49:27 -0800 Better test case: https://codepen.io/smfr/pen/OJPwjJd 1606615 6 simon.fraser 2020-01-14 14:58:09 -0800 We're depth-sorting the layer with the rotateY(180deg) with the layer used to paint the "foreground" (the section background), and they are coplanar, and it ends up sorting behind. The fix is to move it a bit in Z: transform: rotateY(180deg) translateZ(-1px);