不透明バグ - CSSは、「グリッド - 内部の1未満のものに不透明度を変更、基本的に

Question

このバグは、Chromeで自分自身を導入だけで数週間で

https://jsfiddle.net/foreyez/zbjdnete/

を変換アイテムのクラスをcssに入れれば、3Dボックスの辺が消えることがわかります。

だから、基本的にCSSを変更：

.grid-item { 
    margin:5px; 
    animation: float 3s ease-in-out infinite; 
    position:absolute; 
    float:left; 
    transform-style: preserve-3d; 
    width:100px; 
    display:block; 
    height:100px; 
    background:yellow; 
    opacity:0.9; /* <<<<< CHANGE THIS */ 
} 

不透明度はdivの内側の1つの未満インナー変換が消えている場合は、任意の何が起こったかのアイデアや回避策を？

Answer 1

私は次のようにグリッド・アイテム・クラスを変更するには、あなたを提案します：

.grid-item { 
margin:5px; 
animation: float 3s ease-in-out infinite; 
position:absolute; 
float:left; 
transform-style: preserve-3d; 
width:100px; 
display:block; 
height:100px; 
background: rgba(255, 255, 0, 0.3); 
} 

それでも私はバグがChromeの最新バージョンで再現性があるが、この回避策は、トリックを行うべき理由はわかりません。

Answer 2

グリッドアイテムとしてレイアウトされた画像に不透明度を適用しようとしている場合は、filterプロパティが便利です。

.grid-item { 
    // other properties... 
    filter: opacity(80%); 
} 

つまり、overall supportはかなり良いようです。