CSS transition from static image to video is jerky in Safari

Question

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?

Answer 1

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):

• 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/

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