javascript - 在 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;

fork 代码沙箱:https://codesandbox.io/s/81pmjjz60

希望这会有所帮助。