当CSS变换Chrome中的缩放比例时，如何停止边框模糊？

Question

举个例子，使用react-pose让一个元素“弹出到页面上”：https://codesandbox.io/s/qljpvpowp9在火狐、Safari甚至IE上，微调器元素渲染得很好：

​

​

但在Chrome 71上，CSS半圆(边框+边框半径)模糊得无法辨认：

​

我知道这是因为Chrome最初在元素初始化时渲染边界像素的比例很低，但是我怎么才能避免这个问题呢？有没有一个CSS属性可以让我在一开始就停止这种情况的发生，或者有一种方法可以在缩放动画完成后触发重绘？

Answer 1

只需添加用于缩放动画的关键帧：

const scaling = keyframes`
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
`;

然后更改微调器的动画：

animation: ${scaling} 0.5s, ${spin} 1s infinite linear;

派生的CodeSandbox：https://codesandbox.io/s/81pmjjz60

希望这能有所帮助。