- From: Chris Harrelson via GitHub <sysbot+gh@w3.org>
- Date: Sat, 21 Sep 2019 00:08:04 +0000
- To: public-css-archive@w3.org
Now for perspective CSS:
Blink and WebKit both use the enclosing stacking context ancestor that is composited. Therefore, behavior is a side-effect of compositing. :(
If an element has a 3D transform, then its nearest DOM ancestor with perspective is also composited (and because it has perspective it is also a stacking context). However, there may be an intermediate stacking ancestor that is below the perspective and above the transformed element.
Example 1 (perspective is applied to `#inner` in Blink and WebKit:
```
<!doctype HTML>
<div id=p style='perspective: 100px'>
<div style="position: relative; will-change: transform">
<div id=target style='transform: translateZ(-200px); background: lightblue; width: 100px; height: 100px'>
</div>
</div>
```
Example 2 (no perspective applied in Blink (still does in WebKit, not sure why), only because of compositing.
```
<!doctype HTML>
<div id=p style='perspective: 100px'>
<div style="backface-visibility: hidden">
<div id=target style='transform: translateZ(-200px); background: lightblue; width: 100px; height: 100px'>
</div>
</div>
```
--
GitHub Notification of comment by chrishtr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/918#issuecomment-533748822 using your GitHub account
Received on Saturday, 21 September 2019 00:08:05 UTC