vị trí cố định không hoạt động khi lọc CSS áp dụng trên cùng một phần tử trong Microsoft Edge

Tôi đang thử nghiệm này trên Cạnh 20.10240.16384.0vị trí cố định không hoạt động khi lọc CSS áp dụng trên cùng một phần tử trong Microsoft Edge

Tôi có một yếu tố có vị trí được cố định và có bộ lọc CSS áp dụng cho nó. Điều này làm việc tuyệt vời trong tất cả các trình duyệt ngoại trừ Microsoft Edge, nơi vị trí của phần tử không cố định. Sự cố này liên quan trực tiếp đến Bộ lọc CSS3 khi xóa chúng khiến vị trí cố định hoạt động chính xác

Đây là ví dụ cơ bản về điều này. Nó hoạt động chính xác (còn gọi là nền cố định vẫn cố định) trên các trình duyệt khác ngoài 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>

Sau khi tìm kiếm xung quanh, tôi tình cờ gặp https://connect.microsoft.com/IE/feedback/details/1810480/ms-edge-rendering-problem-of-css-filter định chi tiết cùng một vấn đề nhưng đã được đánh dấu là cố định hầu như nó không thể được sao chép. Tôi gắn GIF cho cùng -

Microsoft Edge -

Google Chrome -

Nguồn

2016-03-03 Prayag Verma

Hình như không có một cách giải quyết. Tôi đã không thể tìm thấy bất cứ điều gì hoặc và MS dường như không thể tái tạo nó .... – VikingBlooded

Tôi có thể tái tạo nó cho ví dụ của bạn. Tôi đã cố gắng thay đổi chiều rộng và chiều cao để sử dụng 100vw và 100vh và đặt 'bottom: 0px', ít nhất khiến nó dường như * đôi khi * hoạt động khi tôi bỏ qua và bật quy tắc CSS của bộ lọc. Alt-tabbing giữa các cửa sổ sau đó thỉnh thoảng có nó làm việc một lần nữa, mà chắc chắn là không đủ tốt. Tôi nghĩ rằng điều này đủ điều kiện như là một lỗi Edge. – Katana314

@ Katana314 Tôi có thể giải quyết vấn đề này bằng cách không áp dụng vị trí cố định và bộ lọc CSS cả trên cùng một phần tử nhưng nếu bạn đề xuất, hành vi này rất thất thường –

Đây là một lỗi, ms-edge-rendering-problem-of-css-filter, lẽ ra phải được cố định nhưng rõ ràng là không.

Đây là giải pháp thay thế, nơi bạn vẫn có thể sử dụng position: fixed và hình ảnh và bộ lọc được đặt bằng cách sử dụng phần tử giả :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>

Nguồn

2016-03-05 19:52:04 LGSon

vị trí cố định không hoạt động khi lọc CSS áp dụng trên cùng một phần tử trong Microsoft Edge

Trả lời

Các vấn đề liên quan