最新版的Chrome存在不透明度Bug - CSS变换

Question

这个bug只在最近几周内出现在Chrome中。

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

基本上，在CSS的“grid-item”类中将不透明度更改为小于1的值，您会发现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 */
}

如果不透明度小于1，div内部的转换效果会消失，有什么想法或解决方法吗？

- Shai UI

---

你能说一下你在哪个版本的Chrome和什么操作系统上进行了检查吗？ - Dekel

Chrome的Windows和Mac版本都出现了问题，发现了一个bug。版本号是53.0.2785.113。上周还没这个问题。 - Shai UI

Answer 1

我建议您将grid-item类更改为以下内容：

.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上会重现，但是这个解决方法应该可以解决问题。

- achref

---

很棒的解决方法，谢谢！如果没有更好的想法，我会将其标记为答案。 - Shai UI

Answer 2

如果您在尝试对作为网格项布局的图像应用不透明度时遇到问题，那么filter属性会很有用。

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

虽然IE不支持，但整体支持看起来相当不错。

- Hans Spieß