Edge每次都会以不同的方式呈现CSS变换

Question

我有一个使用transform属性呈现的复选框。看起来是这样：

.ex-checkbox-image-tick {
//1rem = 16px
     border-radius: 0.15rem;
     border: 0.15rem solid transparent;
     border-right-color: $ex-white;
     border-bottom-color: $ex-white;
     width: 0.45rem;
     height: 0.65rem;
     transform: rotateZ(45deg);
     pointer-events: none;
}

然后，我将HTML多次放置在网站上。这是具有相同样式的相同组件：

如您所见，每个复选框的刻度都以略有不同的方式呈现。如何解决这个问题？或者我必须忍受它，因为它是Edge。

Answer 1

您可以尝试启用3D渲染，该渲染利用显卡来硬件加速CSS。

为此，请更改行...

transform: rotateZ(45deg);

进入...

transform: translateZ(0) rotateZ(45deg);

这应该会欺骗浏览器触发GPU加速，这可能会解决您的问题。