Как решить проблему изменения текста в Google Chrome при использовании animation?

Question

[Yoh]

Здравствуйте.

Имеется сайт на Bootstrap 3, в нём стоит слайдер с анимацией. Но незадача - при выполнении анимации меняется текст абсолютно в другом блоке.

Набросал краткий пример состоящий из двух блоков: https://jsfiddle.net/5zgohLcz/
Проблема наблюдается только в Google Chrome, в Mozzila, IE (последней версии), Edge проблемы нет. Если внимательно посмотреть, то при выполнении анимации меняется цвет текста в темном блоке. Из-за чего это может быть и как исправить?

Comments

[Алексей]

Там не цвет меняется, а то ли толщина шрифта, то ли способ его сглаживания.

[Yoh]

Алексей: да, именно так. Пробовал font-weight, text-shadow жестко задавать, но ничего не помогает. Пол дня просидел, собственными силами не удается побороть проблему...

Answer 1

[Алексей]

Как временное решение - добавьте opacity: 0.99; к .navbar.
Проблема, видимо, в наложении блока с opacity на текст, что приводит к изменению способа рендеринга текста.
https://jsfiddle.net/5zgohLcz/1/

Comments

[Yoh]

Да, такое помогает, еще помогает вот такое по аналогии will-change: transform
Это какой-то баг Google Chrome или по какой причине такое происходит? :)

[Алексей]

Это какие-то нюансы рендеринга в хроме.
Вот еще решение, которое помогает - https://jsfiddle.net/5zgohLcz/2/ - -webkit-font-smoothing: antialiased;

[Алексей]

Много информации можно нагуглить по запросу "chrome opacity font rendering".

[Yoh]

Алексей: спасибо, вот оно https://habrahabr.ru/post/166291/, пример из конца статьи помогает.