preserve-3d + CSS filter

Fixed Issue #8948542


Ana T.
Sep 16, 2016
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

When testing this demo in Edge, I noticed everything seemed compressed and flattened in the middle.

Expected result (and how it behaves in WebKit browsers, Firefox has other issues with clipping):

result in WebKit browsers

Actual result in Edge (bottom):


Removing the filter lines (-webkit-filter seems to influence this as well?) makes everything behave correctly in 3D.

Note that the filter is set on an element with no 3D transformed descendants.

Also note that this demo, which follows the same idea, works just fine with filter applied.

Reducing my original demo gets me to this stage, where it’s still broken. Removing the .helix container at this point makes it behave correctly in 3D without removing the filter.


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Rick J.”

      Changed Status to “Fixed”

    • Hi Ana,


      This should be fixed in our preview builds.  If you’re able to try out the latest insider preview build, please take a look and see if this now appears as you expect.




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

    Sign in