11

mix-blend-mode物件をいじっていました。transform: perspective(100px)ページのどこかに何かまたは他の3D変換を追加するまで、すべてが正常に機能し、その後完全に壊れます。変換は適用されますが、ブレンド モードはなくなります。

Chrome と firefox、および Linux と Windows でテストしましたが、どこでも同じですが、別のコンピューターでは問題なく動作しました (どのバージョンの Chrome があり、ubuntu を実行していたかは覚えていません)。

それは CSS で修正できるものですか、それとも単にハードウェア / GPU ドライバーの問題でしょうか?

タグがまだ存在しないbackground-blend-modeのでタグを付けましたが、このプロパティは奇妙に完全に正常に機能し、変換によって壊れません。mix-blend-mode

ここに私が達成しようとしているコードペンがあります: http://codepen.io/vnenkpet/pen/avWvRg

稲妻の黒い背景が点滅するのではなく、ページの背景とスムーズに調和するようにします。

編集：

Firefoxで実際に動作することがわかりました。したがって、これはクロムのバグですか？私の知る限り、3D Transforms はブレンドモードを壊すべきではありません...

4

3 に答える 3

3

私はこれがかなり古いスレッドであることを認識していますが、Masonry Isotopeプラグインを使用してグリッド セクションに mix-blend-mode オーバーレイを使用する Webkit/Blink のジャンキーな変換で同じ問題を抱えていましたが、次の CSS を要素に追加するまでは、変形していました。すなわち、組積造グリッド要素

将来誰かに役立つ場合に備えて、これに答えています。

[your-selector-goes-here] {
    perspective:1000px;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}
于 2016-08-23T19:02:04.193 に答える
3

私は同様の問題を抱えていmix-blend-modeましたが、ページに (乗算) 上位を適用すると、ページtransformの下位が壊れました (Mac で Chrome を使用)。z-indexdiv にルールを適用することでこれを修正できましたmix-blend-mode( a も設定することを忘れないでくださいposition)。

ただし、これがバグなのか、スタック コンテキストのプロパティによる予期される動作なのかは完全にはわかりません。

于 2017-11-14T14:06:12.030 に答える