2016-03-03 7 views
10

में एक ही तत्व पर लागू मैं एज 20.10240.16384.0स्थिति काम नहीं कर रहा फिक्स्ड जब CSS फ़िल्टर माइक्रोसॉफ्ट एज

मैं एक तत्व जिसका स्थिति तय की और सीएसएस यह करने के लिए लागू फिल्टर है है पर इस परीक्षण कर रहा हूँ। यह माइक्रोसॉफ्ट एज को छोड़कर सभी ब्राउज़रों में बहुत अच्छा काम करता है, जहां तत्व की स्थिति तय नहीं होती है। यह समस्या सीधे CSS3 फ़िल्टर से संबंधित है क्योंकि उन्हें हटाने के लिए स्थिति सही ढंग से काम करती है

यहां इसका एक मूल उदाहरण है। यह माइक्रोसॉफ्ट एज के अलावा अन्य ब्राउज़रों पर सही ढंग से काम करता है (उर्फ निश्चित पृष्ठभूमि बनी हुई है)।

<!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 में आए, जो एक ही मुद्दा विवरण लेकिन निश्चित रूप सबसे अधिक संभावना के रूप में यह reproduced नहीं किया जा सका चिह्नित किया गया है। मैं एक ही के लिए GIF संलग्न कर रहा हूँ -

माइक्रोसॉफ्ट एज - enter image description here

गूगल क्रोम - enter image description here

+0

ऐसा लगता है कि कोई समाधान नहीं है की तरह। मुझे कुछ भी नहीं मिला है और एमएस इसे पुन: उत्पन्न करने में सक्षम नहीं है .... – VikingBlooded

+0

मैं इसे आपके उदाहरण के बाद पुन: पेश कर सकता हूं। मैंने 100vw और 100vh का उपयोग करने के लिए चौड़ाई और ऊंचाई बदलने का प्रयास किया, और 'नीचे: 0px' सेट किया, जो कम से कम * कभी-कभी * काम करता था जब मैंने फ़िल्टर सीएसएस नियम को चालू और बंद किया था। खिड़कियों के बीच Alt-tabbing तो कभी-कभी इसे फिर से काम मिल गया, जो निश्चित रूप से पर्याप्त नहीं है। मुझे लगता है कि यह एज बग के रूप में योग्य है। – Katana314

+0

@ कटाना 314 मैं उसी मुद्दे पर स्थिति तय और सीएसएस फ़िल्टर को लागू न करके इस मुद्दे को हल करने में सक्षम था लेकिन अन्यथा जैसा कि आप सुझाव देते हैं, व्यवहार बहुत ही अनियमित है –

उत्तर

3

यह एक बग, 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>

संबंधित मुद्दे