Переход CSS от статического изображения к видео вялен в Safari

Question

У нас есть серия изображений/видеороликов на веб-сайте, которые регулярно меняются с использованием переходов javascript и CSS. Они воспроизводят тонкое изображение для изображения или видео для изображения, но когда переход происходит от изображения к видео, видео начинает дрожать перед началом воспроизведения.

Это происходит только в Safari 9/10. Хром в порядке.

Веб-сайт находится по адресу http://thealthanicollection.com/. Эти видеоролики находятся в верхнем левом углу и регулярно выгружаются.

Кто-нибудь знает об этой проблеме? Могла ли запускаться помощь по ускорению аппаратного ускорения?

Answer 1

Пусковое аппаратное ускорение теоретически может решить проблему, хотя это может привести к возникновению других проблем.

Известно, что Chrome (даже в вашем случае работает) не справляется с этим вопросом, и даже если он сможет решить проблему в Safari, это может вызвать проблемы в Chrome (вам все равно нужно протестировать его) :

• Why transitions for some CSS properties are slow and none fluent
• CSS3 transform difference in Firefox and Chrome and IE
• http://www.binarymoon.co.uk/2014/02/fixing-css-transitions-in-google-chrome/

Но, пожалуйста, проверьте его первые мои ресурсы довольно старше т han ваш вопрос :)

Мое предложение состоит в том, чтобы попробовать с более быстрыми переходами в первую очередь. Это решило мою проблему в предыдущих подобных случаях.

Тем не менее, хотя я хотел бы сослаться на следующий SO вопрос (хорошо принятый ответ) для того, чтобы помочь вам на лучшие практики, чтобы вызвать аппаратное ускорение, если вы решили пойти по этому пути:

Improving CSS3 transition performance