các vấn đề về trộn hỗn hợp trong Chrome

Question

Tôi đã cố gắng sử dụng chế độ hòa trộn trên một trang có chứa các phiên bản chuyển tiếp độ mờ css. Điều gì dường như đang xảy ra là div chứa màn hình trộn-pha chế độ như nó sẽ không có chế độ hòa trộn trong quá trình chuyển đổi, hay đúng hơn, trong khi hoạt ảnh đang được tiến hành. Tôi chỉ phát hiện ra sự cố đó trong Chrome.

Trong ví dụ của tôi, trong khi div đang chuyển đổi chế độ hòa trộn hiển thị chính xác trên hình ảnh nhưng không hiển thị trên nền trang. Khi quá trình chuyển đổi hoàn tất, nó sẽ trở lại hiển thị như mong muốn. Nói cách khác, div được pha trộn xuất hiện dưới dạng màu vàng đặc trên nền đen trong khi hoạt ảnh đang diễn ra nhưng vì nó được thiết lập để làm tối nó sẽ không nhìn thấy được trên nền đen. Một khi các hình ảnh động được hoàn thành nó xuất hiện như nó phải. Nó xuất hiện bình thường trên hình ảnh.

Tôi đã thử đây là Firefox và Safari và có vẻ như không có vấn đề gì.

Pen: http://codepen.io/anon/pen/QGGVOX

Edit - Tôi đã tìm thấy một ví dụ nơi xảy ra này mà không liên quan đến bất kỳ hình ảnh động. Điều kỳ lạ xảy ra khi vị trí của một div được đặt cố định trong khi vị trí khác của div là tuyệt đối, xem tại đây: http://codepen.io/anon/pen/wooRME Nếu vị trí của div .image được thay đổi thành tuyệt đối thì chế độ hòa trộn xuất hiện bình thường.

body { 
background: #000; 
} 

.blend { 
    height: 650px; 
    width: 50%; 
    background-color: yellow; 
    mix-blend-mode: darken; 
    position: absolute; 
    opacity: 1; 
    left: 0; 
    top: 0px; 
    z-index: 100; 
} 

img { 
    position: relative; 
    z-index: 0; 
} 

Answer 1

Vì vậy, tôi nghĩ rằng tôi đã tìm ra sự cố. Trong quá trình hoạt hình, có vẻ như cơ thể không được tính là một phần tử, do đó làm cho màu vàng xuất hiện ở 1 độ mờ. Tôi đã thử nghiệm với chế độ pha trộn khác và nó luôn xuất hiện màu vàng. (khi được đặt thành 'khác biệt kết quả mong đợi sẽ là màu trắng thay vì màu vàng)

Vì vậy, sửa chữa? chỉ cần thêm một div với kích thước 100% và một nền đen! Sau đó, màu vàng có thứ gì đó để hòa trộn và không xuất hiện.

Dưới đây là đoạn code mà làm việc trong bút của bạn:

html - thêm vào div bg:

<div class="bg"></div> 
<div class="blend"></div> 
<img src="http://lorempixel.com/500/500/"> 

nó css:

.bg{ 
    background: #000; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
} 
body { 
    background: #000; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
} 

Tôi cũng thay đổi cơ thể để điền vào cửa sổ do đó, lề không phải là màu vàng quá. Ngoài ra, các div pha trộn có thể được kích thước trong chức năng của cơ thể.

gắn thẻ @chrscblls vì họ muốn biết bạn có tìm thấy gì không.

---

EDIT:

Đối với người kia codepen vấn đề không phải là tho cùng. Họ đang cố gắng làm tối một hình ảnh và một hình chữ nhật màu vàng trên nền xám.

Nếu họ không muốn màu vàng hiển thị trên nền màu xám của họ, giải pháp đơn giản là đặt hình ảnh bên trong div và sử dụng :: sau khi phối màu. Hoặc thậm chí chỉ cần tạo một div trống, cho nó hình ảnh làm nền và sử dụng :: sau.

này:

<div/> 

với:

body { 
    background: #333; 
} 

div{ 
    position:fixed; 
    width: 500px; 
    height: 500px; 
    top:50px; 
    left: 50px; 
    mix-blend-mode: darken; 
    background-image: url("http://lorempixel.com/500/500/"); 
} 
div::after { 
    content: ""; 
    height: 100%; 
    width: 100%; 
    background-color: yellow; 
    mix-blend-mode: darken; 
    position:absolute; 
    opacity: 1; 
    left: 0; 
    top: 0; 
} 

hay này:

<div><img src="http://lorempixel.com/500/500/"></div> 

mà không có sự 'background-image' trong div css.