pozycja nie jest pewna praca przy Filtry CSS stosowane na samego elementu w Microsoft Edge

Jestem testowania to na krawędzi 20.10240.16384.0pozycja nie jest pewna praca przy Filtry CSS stosowane na samego elementu w Microsoft Edge

mam element, którego pozycja jest stała i ma filtrów CSS stosowane do niego. Działa to doskonale we wszystkich przeglądarkach z wyjątkiem Microsoft Edge, gdzie pozycja elementu nie jest stała. Ten problem jest bezpośrednio związany z filtrami CSS3, ponieważ ich usunięcie powoduje, że pozycja jest poprawiona, działa poprawnie

Oto podstawowy przykład tego. Działa poprawnie (inaczej ustalone tło pozostaje stałe) w przeglądarkach innych niż 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>

Po przeszukaniu całego natknąłem https://connect.microsoft.com/IE/feedback/details/1810480/ms-edge-rendering-problem-of-css-filter, który Wycinek ten sam problem, ale został oznaczony jako Fixed najprawdopodobniej, ponieważ nie może być powielana. Załączam GIF o tym samym -

Microsoft Edge -

Google Chrome -

Źródło

2016-03-03 Prayag Verma

Wygląda na to, że nie jest to obejście. Nie byłem w stanie znaleźć niczego i MS wydaje się nie być w stanie odtworzyć tego ... – VikingBlooded

Mogę to odtworzyć na waszym przykładzie. Próbowałem zmienić szerokość i wysokość, aby użyć 100vw i 100vh, i ustawiłem 'bottom: 0px', co przynajmniej sprawiało wrażenie, że * czasami * działa, gdy włączałem i wyłączałem regułę CSS filtra. Alt-tabbing pomiędzy oknami, od czasu do czasu znów działał, co z pewnością nie jest wystarczająco dobre. Myślę, że kwalifikuje się to jako błąd Edge'a. – Katana314

@ Katana314 Udało mi się obejść ten problem, nie stosując filtrów pozycji i CSS zarówno na tym samym elemencie, ale w inny sposób, jak sugerujesz, zachowanie jest bardzo zmienne. –

Jest to błąd, ms-edge-rendering-problem-of-css-filter, powinna zostać ustalona, ale oczywiście nie.

Oto sposób obejścia tego problemu, w którym nadal można używać position: fixed, a obraz i filtr są ustawiane za pomocą pseudoelementu :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>

Źródło

2016-03-05 19:52:04 LGSon

pozycja nie jest pewna praca przy Filtry CSS stosowane na samego elementu w Microsoft Edge

Odpowiedz

Powiązane problemy