10

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?

Jeepstone
  • 2,591
  • 5
  • 22
  • 38
  • Try using -webkit-transform: translateZ(0); on the element that was doing heavy animations to force hardware acceleration. This will make safari render like it's in 3D and smooth out the animations. –  Nov 18 '16 at 19:28
  • I can't notice any jerky transition...the images fade to the videos smoothly. What am I missing? – Pranav Nutalapati Nov 22 '16 at 15:02
  • `translateZ(0)` will NOT trigger the GPU, but `translate3d(0,0,0)` will, so you'll be better off trying that – darryn.ten Nov 22 '16 at 15:05

1 Answers1

2

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

Community
  • 1
  • 1
Vassilis Pits
  • 3,788
  • 4
  • 33
  • 48