混合混合模式被破壞的3D轉換

我正在擺弄mix-blend-mode屬性。一切工作正常，直到我在網頁上的任何位置添加諸如transform: perspective(100px)或任何其他3d轉換之類的東西，然後完全打破。應用了轉換，但混合模式消失了。我在chrome和firefox以及linux和windows上測試過，它在任何地方都是一樣的，但是在不同的計算機上它工作正常（我不記得它有什麼版本的chrome並且正在運行ubuntu）。混合混合模式被破壞的3D轉換

這是可以用CSS修復的東西，或者它可能只是一個硬件/ GPU驅動程序問題？

我把background-blend-mode放在標籤裏，因爲mix-blend-mode這個標籤還不存在，但是這個屬性奇怪地工作得很好，不會被轉換破壞。

這裏是什麼，我想實現一個codepen： http://codepen.io/vnenkpet/pen/avWvRg

閃電不應該有它的黑色背景與它閃爍，但應該與頁面背景平滑過渡。

編輯：

我剛剛發現，它實際上在Firefox沒有工作。這是否是一個鉻錯誤？ 3D變換不應該打破混合模式，據我知道...

來源

2015-10-04 Petr Vnenk

我意識到這是一個很老的線程，但我是有janky同樣的問題使用砌體同位素插件中的Webkit /閃爍轉換在網格部分使用混合混合模式覆蓋，直到我將以下CSS添加到正在轉換的元素。 即砌體網格元件

我回答這個以防萬一以後幫助別人。

div { 
    perspective: 1000px; 
    -webkit-backface-visibility: visible; 
    backface-visibility: visible; 
}

來源

2016-08-23 19:02:04

我有一個類似的問題，但應用mix-blend-mode（乘）在頁面上的打破了我的transform S中的頁面（在Mac上使用Chrome）較低。我可以通過將z-index規則應用到mix-blend-mode div來解決此問題（不要忘記也設置position）。

雖然，我不完全確定這是否是一個錯誤，或者是否由於堆棧上下文的屬性而導致行爲。

來源

2017-11-14 14:06:12 Dluks

你可以嘗試也適用空變換（3D layer promotion）到已經mix-blend-mode指定的元素：

.content { 
    mix-blend-mode: difference; 
    transform: translate3d(0, 0, 0); 
}

這樣，Chrome瀏覽器可以在兩個3D層中成功糅合在一起，而不是遇事混合3D圖層和2D圖層。（當使用will-change: transform，而不是實際的變換，但解決的辦法是一樣的我無意中發現了這個問題。）

function change(event) { 
 
    var content = document.querySelector(".content") 
 
    content.className = event.target.checked ? "content content-with-transform" : "content" 
 
}

.parent { 
 
    text-align: center; 
 
    padding: 2rem; 
 
    font-size: 5rem; 
 
    font-weight: 700; 
 
} 
 

 
.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 4rem; 
 
    background-color: #AB1795; 
 
    transform: translate3d(0, 0, 0); 
 
    z-index: -1; 
 
} 
 

 
.content { 
 
    mix-blend-mode: difference; 
 
    background-color: #167CFB; 
 
} 
 

 
.content-with-transform { 
 
    transform: translate3d(0, 0, 0); 
 
}

<div class="parent"> 
 
    <div class="fixed"></div> 
 
    <div class="content">Content</div> 
 
</div> 
 
<label><input type="checkbox" onchange="change(event)"/> Also transform other element</label>

：

這裏有一個片段演示的問題和解決方案

來源

2018-02-08 02:44:00

混合混合模式被破壞的3D轉換

回答

相關問題