Bug 202576 – Transforming element with parent background-color fails if iframe with z-index -1 present in DOM

• Status: NEW
• Component: Compositing

[Dag-Inge Aas]

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.

[Radar WebKit Bug Importer]

<rdar://problem/56022948>

[Simon Fraser (smfr)]

I can't view the test case ("This debug view expired").

[Simon Fraser (smfr)]

Ah, https://codepen.io/daginge/pen/dybLjGg works. I can reproduce.

[Dag-Inge Aas]

Yes, sorry about that. I wasn’t aware those expired :/

[Simon Fraser (smfr)]

Better test case: https://codepen.io/smfr/pen/OJPwjJd

[Simon Fraser (smfr)]

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);