Как остановить размытие границ при масштабировании CSS-преобразования в Chrome?

Question

Возьмем этот пример, используя реагирующую позу для анимации элемента, «всплывающего на страницу»: https://codesandbox.io/s/qljpvpowp9 В Firefox, Safari и даже IE элемент spinner отображает нормально:

но в Chrome 71 полукруг CSS (border + border-radius) размыт до неузнаваемости:

Я понимаю, что это потому, что Chrome изначально отображает пиксели границы в низком масштабе, с которым инициализируется элемент, но как мне обойти это? Есть ли свойство CSS, которое я могу установить, чтобы это вообще не происходило, или способ вызвать перерисовку после завершения анимации масштабирования?

Answer 1

Просто добавьте ключевые кадры для масштабирования анимации:

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

Затем измените анимацию прядильщика:

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

Forked CodeSandbox: https://codesandbox.io/s/81pmjjz60

Надеюсь, это поможет.