在Chrome中进行CSS转换缩放时，如何停止边框模糊？

Question

在本示例中，使用react-pose为“弹出到页面”的元素设置动画： https://codesandbox.io/s/qljpvpowp9 在Firefox，Safari甚至是IE上，Spinner元素都可以很好地呈现：

但是在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;

分叉的代码沙箱：https://codesandbox.io/s/81pmjjz60

希望这会有所帮助。