位置予以确定不工作时，应用相同的元素的CSS过滤器在微软边缘

我在边缘20.10240.16384.0位置予以确定不工作时，应用相同的元素的CSS过滤器在微软边缘

我有一个元素，它的位置是固定的，并已应用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为同 -

微软边缘 -

谷歌浏览器 -

来源

2016-03-03 Prayag Verma

貌似还没有一个解决办法。我还没有找到任何东西，MS似乎无法重现它...... – VikingBlooded

我可以重现它给你的例子。我试图改变宽度和高度来使用100vw和100vh，并设置'bottom：0px'，这至少在我打开和关闭过滤器CSS规则时至少使它看起来有时*工作。窗口之间的Alt-tabbing偶尔会让它再次工作，这当然不够好。我认为这符合Edge的缺陷。 – Katana314

@ Katana314我可以通过在同一元素上应用位置固定和CSS过滤器来解决此问题，但除此之外，您的建议是，行为非常不稳定 –

这是一个错误，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>

来源

2016-03-05 19:52:04 LGSon

位置予以确定不工作时，应用相同的元素的CSS过滤器在微软边缘

回答

相关问题