Bug 202576
| Summary: | Transforming element with parent background-color fails if iframe with z-index -1 present in DOM | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Dag-Inge Aas <daginge> |
| Component: | Compositing | Assignee: | Simon Fraser (smfr) <simon.fraser> |
| Status: | NEW | ||
| Severity: | Normal | CC: | dino, simon.fraser, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 12 | ||
| Hardware: | iPhone / iPad | ||
| OS: | iOS 13 | ||
| Bug Depends on: | 206262 | ||
| Bug Blocks: | |||
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.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
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);