当CSS过滤器应用于Microsoft Edge中的同一元素时,位置固定不起作用
Pra*_*rma 11 css css-filters microsoft-edge
我在Edge 20.10240.16384.0上测试了这个
我有一个元素,其位置是固定的,并应用了CSS过滤器.这适用于除Microsoft Edge之外的所有浏览器,其中元素的位置不会保持固定.此问题与CSS3过滤器直接相关,因为删除它们会使位置修复正常
这是一个基本的例子.它在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>在搜索之后,我遇到了https://connect.microsoft.com/IE/feedback/details/1810480/ms-edge-rendering-problem-of-css-filter,它详细说明了同样的问题,但已被标记为已修复最有可能因为它无法复制.我正在附加GIF -
微软边缘 -
谷歌浏览器 -
这是一个bug，ms-edge-rendering-problem-of-css-filter应该已经修复，但显然不是。
这是一种变通方法，您仍然可以使用它position: fixed，并且使用:after伪元素设置图像和滤镜。
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>| 归档时间： |
|
| 查看次数： |
5878 次 |
| 最近记录： |