Issue metadata
Sign in to add a comment
|
transform CSS animation breaks backface-visibilty: hidden
Reported by
super.dr...@gmail.com,
Mar 24 2018
|
||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.119 Safari/537.36 Steps to reproduce the problem: 1. Have a parent element with transform: rotateY(180deg) and backface-visibility: hidden. 2. Have a child element with a CSS animation on its transform property. What is the expected behavior? The child element should be invisible due to its parent being flipped 180deg around the Y-axis with backface-visiblity: hidden. What went wrong? The child element remains visible as if its parent's had backface-visibility: visible. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 64.0.3282.119 Channel: n/a OS Version: Flash Version: 1. This problem doesn't happen if the child element's transform property is animated using CSS transitions instead of CSS animations. 2. This problem doesn't happen on Firefox ESR 52.7.2. 3. These fiddles may help understand the problem: * Case A: https://jsfiddle.net/drfkswyo/ (problem occurs; a rotating box with the letter A can be seen even though it's rotated 180deg around its Y-axis and has backface-visibility: hidden). * Case B: https://jsfiddle.net/wawbosp9/ (problem doesn't occur; the only difference between this and case A is that the box with the letter A is being rotated using JavaScript).
,
Mar 24 2018
That did fix the problem. Consider closing as duplicate.
,
Mar 26 2018
Thanks for filing the issue! As the issue seems to be related to Issue 224618, and as per comment#3 by reporter considering it as Duplicate, Hence duplicating into it.
,
Mar 26 2018
No it is a completely different issue. This is a spec bug about the definition of |backface-visibility|. The spec text says |backface-visibility| is a per-element property like |visibility|, except that the actual used value depends on the rendering matrix of the element. However all vendor implementation I knew implemented it as some sort of per-plane property. What constitutes a plane is not defined in the spec, and is arbitrarily implemented by Blink/WebKit as "elements that happen to create RenderLayers, a internal structure". Actually if the spec is followed in verbatim, both 'A' and 'B' should be visible because both of them have computed value of backface-visibility:visible. I raised the issue at W3C TPAC 2017. It was confirmed by the spec author. I should have filed a bug at W3C github and submit a spec proposal, but haven't got time to do it. The bottom line is, |backface-visibility| is broken, despite the all green status at MDN. Just don't use it if you want any kind of interoperability. I'll re-mark this as WontFix for now, as the situation is unlikely to be fixed in any short term. |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by woxxom@gmail.com
, Mar 24 2018