CODEWITHSUNDEEP
javascriptcssvideosafaritransition
Jeepstone
Jeepstone

Reputation: 2601

CSS transition from static image to video is jerky in Safari

We have a series of images/videos on a website that are swapped out at regular intervals using javascript and CSS transitions. These work fine image to image, or video to image, but when the transition is from image to video, the video jerks before starting to play.

This only occurs in Safari 9/10. Chrome is fine.

Website is at http://thealthanicollection.com/. This videos are in the top left corner and are swapped out regularly.

Is anyone aware of this issue? Could triggering hardware acceleration help here?

Upvotes: 10

Views: 703

Answers (1)

Vassilis Pits
Vassilis Pits

Reputation: 3848

Triggering hardware acceleration could theoretically solve the issue, though this can give you other issues.

It is known that Chrome (even that in your case works) doesn't do great job in this matter and even that it could solve the issue in Safari it could produce issues in Chrome (you have to test it anyway):

But please test it first as my resources are quite older than your question :)

My suggestion is to try with quicker transitions first. That solved my problem in previous similar cases.

Still though I would like to refer the following SO question (well the accepted answer) in order to help you on the best practices to trigger the hardware acceleration if you decide to take that path:

Improving CSS3 transition performance

Upvotes: 2

Related Questions