Preserve-3d scrollers not clipping correctly
Confirmed Issue #10196301 • Assigned to Rick J.
Steps to reproduce
http://codepen.io/anon/pen/ENMwWb
.container {
background: lightblue;
width: 300px;
transform-style: preserve-3d;
}
.content {
max-height: 200px;
overflow: scroll;
}
.rotx {
transform: rotateX(45deg)
}
<div class="container">
<div class="content">
<ol>
<li><li><li><li><li>
<li><li><li><li><li>
<li><li><li><li><li>
Should not see me.
<li><li><li><li><li>
</ol>
</div>
<div class="rotx">success</div>
</div>
- Open this test page: http://codepen.io/anon/pen/xRyROv
- Notice the 2
.modal
elements in the page - The first one has a child with rotateX, the second one does not
What happens:
In the first modal, the header and the footer are rendered transparent while still having a background rule.
In the second modal the header and footer are rendered correctly, because there is no child with rotateX.
Expected result:
The header and the footer in both modals should be rendered the same.
You need to sign in to your Microsoft account to add a comment.
Sign in