Почему изменяется вид шрифта во время анимации стороннего объекта?

Question

[keslo]

Добрый день.
Заметил, что на Маке во время анимации смены заднего фона блока при помощи метода fadein() от JQuery во время анимации стиль шрифта кнопок меняется. Стиль шрифта всегда один и не меняется при наведении мною в стилях.

Заметил, что шрифт меняется сразу у обоих кнопок.

На винде все в порядке. Почему так происходит?


Ссылка на страницу - goo.gl/sBEZjr

Answer 1

[Евгений Петров]

Проблема старинная и живёт аж с 2009 года.
Встречал разные предлагаемые способы решения.

Stacking context
position:relative + z-index:...
Обсуждение, в котором есть ссылка на видео и решение проблемы. Для вашего случая это относится к слою с кнопками и слоям с изображениями.

3D transform engine
-webkit-transform: translateZ(0)
Обсуждение с предложением использования 3D движка. Звучит разумно.

Font smoothing
-webkit-font-smoothing — antialiased | subpixel-antialiased
В обоих обсуждениях и по отдельности можно встретить попытки побороть проблему за счёт управления сглаживанием. Не пробовал, ничего не скажу, но энтузиазма по поводу этих решений не увидел.

Пы.Сы. А зачем вам animation-fill-mode для кнопок?

Comments

[keslo]

Спасибо вам!
Инструкция таковая помогла:
-webkit-font-smoothing: subpixel-antialiased;

Но тут другой вопрос назревает: какое сглаживание шрифтов предпочтительно использовать в Safari?

P.S. Такой проблемы на данный момент в Chrome не наблюдаю.

[keslo]

И по-этому вопросу:
> А зачем вам animation-fill-mode для кнопок?
Можете как у не провещенного спросить у меня? Потому что возможно я использую что-то, что не стоит использовать.

[Евгений Петров]

Chrome использует версию webkit, отличную от Safari.
Что же насчёт проблемы и сглаживания — в Blink её не замечал, на Маке актуальностью не интересовался.

[keslo]

Евгений Петров: у меня только на маке такая проблема вылезла.

Таки вопрос:
- можно как-то задавать сглаживание текста на весь текст на случай анимации или только принудительно на каждый блок?

[Евгений Петров]

Ну проблема только на Маке осталась, а я, повторюсь, не исследовал проблему на них. Не могу помочь, сожалею. Вы можете сами провести эксперименты, поискать решения или обсуждения этой проблемы.

[keslo]

Евгений Петров: в любом случае спасибо. Ваши советы пригодились.

[Даниил Постнов]

Спасибо Евгений!
Мне помогло свойство -webkit-transform: translateZ(0), заданное для родительского элемента.

Answer 2

[Максим Антонихин]

Там нет прозрачностей? В тенях может.
Я бы изменил шрифт на другой и проверил, реально ошибка в шрифте. И также убрал все стили с этого текста.
Нужно идти по пути исключений.

Comments

[keslo]

Спасибо за ответ. Докладываю:

- смена шрифта не прокатила
- удаление стиле не прокатило

Заметил, что стиль меняется в момент начала/конца анимации при fadeind/fadeout на JQuery. Так же меняется при выплывали кнопок изначальной сделано при помощи animate.css.

Добавил активную ссылку на страницу в текст вопроса, где можно это посмотреть.