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加速，这可能会解决您的问题。