Масштабирование масштабирования CSS в Chrome

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.