크롬/사파리가 최근에 믹스 블렌드 모드 처리 방식을 변경 했습니까?

Question

Chrome의 (당시) 최신 버전 (아마 v56 또는 v57이지만 확실하지는 않습니다)을 사용하여 몇 주 전에 웹 페이지를 만들었습니다. 개발 중 Safari 및 Firefox (OSX) http://dirkluetter.de/projecttype/kamera

Firefox (v52 & v53)는 의도 한대로 페이지를 계속 표시합니다.

가장 최근의 Chrome 버전 (v58)은 더 이상 제공되지 않습니다.

잘 작동 한 혼합 - 혼합 모드 및 배경 혼합 모드 CSS 속성을 사용했으며 여전히 FF로 수행했습니다. 이제 Chrome/Safari는 속성을 무시한 채로 보이지만 Firefox는 계속 페이지를 의도 한대로 표시합니다. 웹킷 브라우저가 믹스 - 블렌드 모드를 처리하는 방식에서 최근에 뭔가 바뀌 었습니까? 나는 이것에 대한 변경에 관한 어떤 정보도 찾지 못한다. 믹스 - 블렌드 모드와 크롬에 관한 몇 가지 다른 질문이 있지만, 나의 것과 관련이없는 곳을 체크 한 것들이있다.

Answer 1

정확히 무슨 일이 일어나는지 확실하지 않지만 루트 요소에 background: white을 추가하고 mix-blend-mode을 본문의 래퍼 요소로 이동하여 Chrome에서 작동하도록 할 수 있습니다.

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>