[Webkit-unassigned] [Bug 201987] New: backdrop-filter applied to child element when child uses transform

Thu Sep 19 09:39:38 PDT 2019

https://bugs.webkit.org/show_bug.cgi?id=201987

            Bug ID: 201987
           Summary: backdrop-filter applied to child element when child
                    uses transform
           Product: WebKit
           Version: Safari 12
          Hardware: All
                OS: macOS 10.14
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: lawjolla at aol.com

Created attachment 379137

  --> https://bugs.webkit.org/attachment.cgi?id=379137&action=review

Safari (left) vs Chrome (right) for codepen above

Any child element of a `backdrop-filter` parent with `transform` has the `backdrop-filter` applied.  

Please see: 
https://codepen.io/LawJolla/pen/jONQrvR

Example code

<body>
  <div id="wrapper">
    <img src="https://www.stickpng.com/assets/images/5b3b46b69357a48ff2188195.png" width="200px" />
    <div id="title">Safari Backdrop Filter Bug</div>
  </div>
</body>

<style>
#wrapper {
    -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  position: relative;
}
#title {
   transform: rotateX(180deg);
}
img {
  transform: rotateX(180deg);
}
body {
  color: white;
  background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
}
</style>

Thanks for the hard work!

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20190919/f226c723/attachment-0001.html>