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

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

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

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

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

Ответ 1

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

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

Но сначала проверьте его, так как мои ресурсы намного старше вашего вопроса:)

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

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

Улучшение производительности перехода CSS3