在Microsoft Edge中将CSS筛选器应用于同一元素时，位置固定不起作用 [英] Position Fixed not working when CSS Filters applied on same element in Microsoft Edge
问题描述
我正在Edge 20.10240.16384.0上对此进行测试
I am testing this on Edge 20.10240.16384.0
我有一个位置固定的元素，并对其应用了CSS过滤器.在Microsoft Edge(该元素的位置不会保持固定)以外的所有浏览器中，此方法都适用.这个问题与CSS3过滤器直接相关，因为删除它们可以使固定位置正常工作
I have an element whose position is fixed and has CSS Filters applied to it. This works great in all browsers except Microsoft Edge, where the position of the element doesn't remain fixed. This issue is directly related to CSS3 Filters as removing them makes the position fixed work correctly
这是一个基本的例子.它可以在Microsoft Edge以外的浏览器上正常运行(也就是固定背景保持不变).
Here is a basic example of this. It works correctly (aka the fixed background remains fixed) on browsers other than Microsoft Edge.
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 5000px;
}
.fixed {
position: fixed;
left: 0;
background-image: url(https://lh5.googleusercontent.com/-REJ8pezTyCQ/SDlvLzhAH-I/AAAAAAAABeQ/mC1PXNiheJU/s800/Blog_background_750.gif);
background-repeat: repeat;
background-attachment: fixed;
height: 100%;
width: 100%;
-webkit-filter: brightness(70%);
-moz-filter: brightness(70%);
-o-filter: brightness(70%);
filter: brightness(70%);
}
</style>
</head>
<body>
<div class='fixed'></div>
</body>
</html>
After searching around , I came across https://connect.microsoft.com/IE/feedback/details/1810480/ms-edge-rendering-problem-of-css-filter , which details the same issue but has been marked as Fixed most likely as it couldn't be reproduced. I am attaching GIF for the same -
Microsoft Edge-
Google Chrome-
推荐答案
It is a bug, ms-edge-rendering-problem-of-css-filter, should have been fixed but obviously not.
这是一种解决方法，您仍然可以使用position: fixed，并且使用:after伪元素设置图像和滤镜.
Here is a workaround, where you still can use position: fixed and the image and filter is set using the :after pseudo-element.
body {
height: 5000px;
}
.fixed {
position: fixed;
left: 0;
height: 100%;
width: 100%;
}
.fixed:after {
content: ' ';
position: absolute;
left:0;
top: 0;
height: 100%;
width: 100%;
background-image: url(https://lh5.googleusercontent.com/-REJ8pezTyCQ/SDlvLzhAH-I/AAAAAAAABeQ/mC1PXNiheJU/s800/Blog_background_750.gif);
background-repeat: repeat;
background-attachment: fixed;
-webkit-filter: brightness(70%);
-moz-filter: brightness(70%);
-o-filter: brightness(70%);
filter: brightness(70%);
}
<div class='fixed'></div>
这篇关于在Microsoft Edge中将CSS筛选器应用于同一元素时，位置固定不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
