Javascript 最新版本的Chrome-CSS转换中的不透明度错误

这个bug是在最近几周才在Chrome中出现的

基本上，在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 */
}

.grid项{
保证金：5px；
动画：浮动3s轻松输入输出无限；
位置：绝对位置；
浮动：左；
变换样式：保留-3d；
宽度：100px；
显示：块；
高度：100px；
背景：黄色；
不透明度：0.9；/*我建议您将网格项类更改为以下内容：

.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上是可以重现的，但是这个解决方法应该可以解决这个问题。
对于任何试图在以网格项目显示的图像上应用不透明度时遇到这个问题的人来说，
过滤器
属性非常有用

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

虽然ie不支持，但它看起来相当不错。
非常棒的解决方案，谢谢！如果没有其他人提出更好的想法，我们会将此标记为答案。你可以说你检查了哪个版本的chrome和什么操作系统吗？在Windows和Mac版本的chrome.53.0.2785.113中都发现了该漏洞。上周，这起到了作用。