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

Question

I made a webpage a couple of weeks ago using (then) a recent version of Chrome (maybe v56 or v57, but I don’t know for sure), Safari and Firefox during development (on OSX). http://dirkluetter.de/projecttype/kamera

Firefox (v52 and v53) still displays the page as intended.

While the latest version of Chrome (v58) no longer exists.

I used the CSS-mix-blend-mode and background-blend-mode properties that worked fine then - and still do this on FF. Now Chrome / Safari seems to ignore the property, while Firefox still displays the page as it sees fit. Has something changed lately in the way Webkit browsers handle mix-blend-mode? I can’t find any information about the changes in this question ... there are several other questions regarding mix-blend-modes and chrome, but the ones I checked where are not related to mine.

Answer 1

I'm not sure what is going on, but I can make it work in Chrome by adding background: white to the root element and moving mix-blend-mode to the shell element inside the 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>