Chrome中的CSS缩放动画生涩

Question

我有一个保存按钮，当需要保存表单时会跳动。

CSS：

@keyframes pulse-scale {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}
.btn-alert {
  animation: 1s pulse-scale ease-out infinite alternate;
}

HTML：

<button class="btn btn-round btn-alert">
  <i class="fa fa-check"></i>
</button>

问题是它在 Chrome 49 中表现不佳。我确信它曾经很好，但现在随着它的缩放，它似乎捕捉到某些像素对齐的比例，并在模糊和锐利之间切换，导致“生涩”的动画。 在 Firefox 38 中似乎没问题 在 Firefox 38 中，它最初可以正常播放，但在等待一段时间（？）或切换到另一个窗口并返回后，它的播放效果也很差。

需要明确的是，这是一个图像采样（质量）问题，而不是帧率（速度）问题。这是一个关于它的外观的视频。从左到右：Firefox、几分钟后的 Firefox、Chrome。只有左边的播放正确。

有没有我可以设置的 CSS 属性让它更好玩 - 例如强制它使用不同的插值模式？我在关键帧上尝试了adding translateZ(0)，但似乎没有帮助。

Demo in JSFiddle

Answer 1

此错误似乎与 Chrome 49 有关，如果您升级到 Chrome 50，此错误已得到修复。