How to Fix Safari Mix-Blend-Mode: Color-Dodge Bug

How to fix Safari mix-blend-mode: color-dodge bug?

Wrap your items in a container, isolate the container, and don't absolutely position your h1.

div {  isolation: isolate;}
h1 {  font-size: 10rem;  color: #fb4b6b;  mix-blend-mode: color-dodge;}
img {  position: absolute;  top: 200px;  z-index: -1;}

<div>  <h1>Hello Mix Blend Mode</h1>  <img src="https://source.unsplash.com/random"/></div>

CSS: mix-blend-mode = color-dodge not working in Chrome but okay in Firefox

In fact using the SVGs as background-image is working:

.demo {  width:100px;  height:100px;  mix-blend-mode: color-dodge;}
body {  background-color: #222;}.center {  position: fixed;  top: 50%;  left: 50%;}.pr {  transform: translate(-30%, -50%);  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%23ff0000' /%3E%3C/svg%3E");}.pg {  transform: translate(-80%, -50%);  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%2300ff00' /%3E%3C/svg%3E");}.pb {  transform: translate(-50%, -30%);  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%230000ff' /%3E%3C/svg%3E");}

<div class="demo center pr"></div><div class="demo center pg"></div><div class="demo center pb"></div>

css mix-blend-mode: difference issue in safari

Found some help from Jonathan at https://greensock.com/forums/topic/21802-issues-with-safari-perspective-mix-blend-mode/

A solution here

Is to add transform: translate3d(0,0,0); to .btn-anim.

It puts it on the same rendering layer and Safari can then apply the effect same as FF/Chrome.

Did Chrome / Safari recently change the way mix-blend-mode is handled

I'm not sure exactly what's going on, but I can get it to work in Chrome by adding background: white to the root element and moving the mix-blend-mode to a wrapper element inside of body.

html {  background: white;  display: flex;  height: 100%;}
body {  margin: 0;  background-blend-mode: luminosity;  background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/15/AreeiroMetroLx2.JPG);  background-color: #006699;  background-size: cover;}
div {  mix-blend-mode: multiply;}
p {  color: magenta;}

<div><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin felis ultrices lacus venenatis, in porta dui sagittis. Aliquam maximus massa diam, ut elementum sem efficitur mollis. Proin mattis magna ante, sit amet semper nulla semper at. Vivamus hendrerit tortor nec lacus venenatis, vitae molestie odio consectetur. Vivamus fermentum id ligula et scelerisque. Etiam eu metus nec lacus aliquet convallis at sed mi. Integer euismod lorem risus, sit amet molestie mi egestas vitae. In quis consequat ligula. Pellentesque erat elit, ultricies et massa ut, cursus congue dolor. Suspendisse risus est, aliquet nec justo a, bibendum convallis justo.</div>

---

Related Topics