位置予以確定不工作時，應用相同的元素的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過濾器在微軟邊緣

回答

相關問題