Javascript chrome设置不透明度的渲染不符合预期

我花了大约一周的时间来寻找答案，并尝试各种不同的方法来设置不透明度，并强制各种元素重新绘制，以更新全部内容

这在firefox中完全呈现

var hex=document.getElementsByClassName（'hex'）[0]；
十六进制类列表添加（“突出显示”）
.hex{
浮动：左；
右边距：-29px；
边缘底部：-52px；
高度：104px；
宽度：120px；
}
.亮点{
不透明度：0.50；
过滤器：α（不透明度=50）；
}
.沙漠{
背景：url（“http://i.imgur.com/zAr9w6T.png");
}
大蠊{
填充：#FF9933；
笔画：黑色；
}
a{
颜色：继承；
}
.菜单{
背景#8bc34a；
颜色：白色；
文本对齐：居中；
}
.菜单项，.菜单打开按钮{
背景：#e91e63；
边界半径：100%；
宽度：25px；
高度：25px；
左边距：-40px；
位置：绝对位置；
颜色：白色；
文本对齐：居中；
线高：25px；
-webkit转换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
-webkit转换：-webkit转换慢出200ms；
过渡：变换缓变200ms；
}
.菜单打开{
显示：无；
}
.菜单项：悬停{
背景：白色；
颜色：#e91e63；
}
.菜单打开按钮{
z指数：2；
-webkit过渡计时功能：立方贝塞尔（0.175、0.885、0.32、1.275）；
过渡计时功能：立方贝塞尔（0.175,0.885,0.32,1.275）；
-webkit转换持续时间：400ms；
过渡时间：400ms；
-webkit转换：缩放（1.1,1.1）平移3D（0,0,0）；
变换：缩放（1.1,1.1）平移3D（0,0,0）；
光标：指针；
}
.菜单打开按钮：悬停{
-webkit变换：缩放（1.7,1.7）平移3D（0,0,0）；
变换：缩放（1.7,1.7）平移3D（0,0,0）；
}
.菜单打开：选中+.菜单打开按钮{
-webkit转换定时功能：线性；
过渡时间函数：线性；
-webkit转换持续时间：200ms；
过渡时间：200ms；
-webkit变换：缩放（0.8,0.8）平移3D（0,0,0）；
变换：缩放（0.8,0.8）平移3D（0,0,0）；
}
.菜单打开：选中~.菜单项{
-webkit过渡计时功能：立方贝塞尔（0.935,0,0.34,1.33）；
过渡计时功能：立方贝塞尔（0.935,0,0.34,1.33）；
}
.菜单打开：选中~菜单项：第n个子项（3）{
-webkit转换持续时间：180ms；
过渡时间：180ms；
-webkit转换：translate3d（-40px，-25px，0）；
转换：translate3d（-40px，-25px，0）；
}
.菜单打开：选中~菜单项：第n个子项（4）{
-webkit转换持续时间：280ms；
过渡时间：280ms；
-webkit转换：translate3d（40px，-25px，0）；
转换：translate3d（40px，-25px，0）；
}
.菜单打开：选中~菜单项：第n个子项（5）{
-webkit转换持续时间：380ms；
过渡时间：380ms；
-webkit转换：translate3d（40px，25px，0）；
转换：translate3d（40px，25px，0）；
}
.菜单打开：选中~菜单项：第n个子项（6）{
-webkit转换持续时间：480ms；
过渡时间：480ms；
-webkit转换：translate3d（-40px，25px，0）；
转换：translate3d（-40px，25px，0）；
}
.轮换{
-webkit转换：所有0.2s线性；
过渡：所有0.5s线性；
}
.向下旋转{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
121
因此，在花了一周的时间研究这个问题之后，它看起来是Chrome的一个bug

代替改变不透明度，我选择应用webfilter来突出显示十六进制作为chrome中bug的解决方法

-webkit-filter: brightness(110%);
-webkit-filter: sepia(70%);
-webkit-filter: hue-rotate(-15deg);

我希望这能帮助任何遇到同样问题的人
因此，在花了一周的时间调查这一问题之后，这看起来是Chrome的一个bug

代替改变不透明度，我选择应用webfilter来突出显示十六进制作为chrome中bug的解决方法

-webkit-filter: brightness(110%);
-webkit-filter: sepia(70%);
-webkit-filter: hue-rotate(-15deg);

我希望这能帮助任何遇到相同问题的人
我的问题的视频可以在这里看到我的问题的视频可以在这里看到