Lỗi chế độ trộn hỗn hợp css3 Chrome trong chrome

Question

Tôi có một lớp phủ chồng lên nhau và phần được phủ được pha trộn bằng chế độ hòa trộn kết hợp. Trong chrome hiệu ứng được áp dụng nhưng có nhấp nháy lạ của div với thuộc tính này. lý do cho việc nhấp nháy này là gì và cách giải quyết. Tôi đã thử nghiệm nó trên firefox chạy tốt nhưng không phải trong chrome.!

Screenshot

Hình ảnh trên là một lần hình ảnh động được hơn và một khi nó được thực hiện div trái bắt đầu nhấp nháy không ngừng.

<div class="bottom-banner wr-fl"> 
     <div class="left-overlay overlay"></div> 
     <div class="right-overlay overlay"></div> 
     <div class="center heading"> 
      {{entry.bottom_banner.banner_heading}} 
     </div> 
    </div> 
    .bottom-banner .left-overlay 
    { 
     mix-blend-mode:multiply; 
     background:rgba(0,54,108,0.7); 
     transform:skew(-25deg); 
     z-index:11; 
     left:-280px; 

    } 
    .bottom-banner .right-overlay 
    { 
     width:500px; 
     transform:skew(-25deg); 
     right:-600px; 
     animation:slideinbottom 2s ; 
     background:red; 
     mix-blend-mode:multiply; 
    } 

Answer 1

nó sẽ làm việc trên tất cả các trình duyệt thử này

.bottom-banner .left-overlay 
    { 
     -webkit-mix-blend-mode: multiply; 
     -moz-mix-blend-mode: multiply; 
     -o-mix-blend-mode: multiply; 
     -ms-mix-blend-mode: multiply; 
     mix-blend-mode:multiply; 
     background:rgba(0,54,108,0.7); 
     -webkit-transform:skew(-25deg); 
     -moz-transform:skew(-25deg); 
     -ms-transform:skew(-25deg); 
     transform:skew(-25deg); 
     z-index:11; 
     left:-280px; 

    } 
    .bottom-banner .right-overlay 
    { 
     width:500px; 
     -webkit-transform:skew(-25deg); 
     -moz-transform:skew(-25deg); 
     -ms-transform:skew(-25deg); 
     transform:skew(-25deg); 
     right:-600px; 
     -webkit-animation:slideinbottom 2s ; 
     -moz-animation:slideinbottom 2s ; 
      -ms-animation:slideinbottom 2s ; 
      -o-animation:slideinbottom 2s ; 
      animation:slideinbottom 2s ; 
     background:red; 
     -webkit-mix-blend-mode: multiply; 
     -moz-mix-blend-mode: multiply; 
     -o-mix-blend-mode: multiply; 
     -ms-mix-blend-mode: multiply; 
     mix-blend-mode:multiply; 
    } 

Answer 2

Tôi có vấn đề này và thấy rằng nó dường như được gây ra bởi sự kết hợp của độ mờ đục với hỗn hợp pha trộn-mode. Giải pháp là thêm quy tắc will-change: opacity hoặc cách khác transform: translateZ(0) cho phụ huynh của phần tử chuyển đổi. Hoặc là một trong số đó sẽ làm, nhưng tôi nghĩ rằng tùy chọn will-change là thích hợp hơn (ở chỗ nó ít hacky hơn).

Trong cả hai trường hợp, tôi cho rằng hiệu ứng là chuyển giao phần tử đó cho GPU (hoặc ít nhất để cảnh báo trình duyệt rằng nó có thể được sơn lại), dường như khắc phục sự cố.

Tín dụng do this issue trong trình theo dõi lỗi Chromium để chỉ cho tôi đi đúng hướng.