Preserve-3d scrollers not clipping correctly

Confirmed Issue #10196301 • Assigned to Rick J.

Details

Author
Roy P.
Created
Dec 14, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

http://codepen.io/anon/pen/ENMwWb](http://codepen.io/anon/pen/ENMwWb)[http://codepen.io/anon/pen/ENMwWb](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>

 

 

 

 

  1. Open this test page: http://codepen.io/anon/pen/xRyROv
  2. Notice the 2 .modal elements in the page
  3. 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.

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Ibrahim O.”

      Changed Assigned To to “Rick J.”

      Changed Steps to Reproduce

      Changed Title from “Absolute positioned element rendering problem when parent has perspective and sibling has 3d transformation” to “Preserve-3d scrollers not clipping correctly”

      Changed Status to “Confirmed”

    You need to sign in to your Microsoft account to add a comment.

    Sign in