CSS backdrop-filter blur effect misaligned in Chrome
Question
I have a parent div with a fixed height, as well as a child div that extends outside of the parent. Within Chrome 75, this results in the parent div's backdrop-filter effect being applied outside of the expected area. This does not happen with IOS/Safari.
Try it: https://jsfiddle.net/7grL6t0n/
Firefox or Edge don't support backdrop filters at all. Not sure about other platforms/browsers.
Please note: You need to have 'Experimental Web Platform features' activated in chrome://flags to see the blur effect.
Is this a Chrome bug or am I doing something wrong. If it is a bug, is there perhaps some CSS workaround for this problem?
body { background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/USAF-1951.svg/1024px-USAF-1951.svg.png); } .parent { background-color: rgba(255, 0, 0, 0.5); height: 100px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .child { background-color: rgba(0, 255, 0, 0.5); width: 300px; height: 300px; }
<body> <div class="parent"> Parent with fixed height, red background and "blur" backdrop filter, which should appear within the parent, but is moved down by the child. <div class="child"> Child with green background, extending outsite of parent. </div> </div> </body>
1 answers
solution1
0 2019-08-01 21:37:08
这是Chrome 75中的错误。背景滤镜功能已在Chrome 76中正式启动，并且此错误（以及许多其他错误）已在76版本中修复。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.