Jerky animation in Safari 8

[Daf Sirka]

Hello,

 

I'm looking for some tips for a problem I'm having in  Safari 8. The animation of this example () runs very smooth in Chrome, Firefox and Safari 9. But not in Safari 8, there the animation is a bit jerky. Does anyone know what causes this jerky animation in Safari 8 or is there someone who has a solution for this problem? 

Thank you for your time!

Daf

See the Pen KpwWgy by sgorneau (@sgorneau) on CodePen

[Jonathan]

Hello Daf Sirka, and welcome to the GreenSock Forum!

 

With that codepen link i am also seeing it animate jerky in Firefox on Windows 7. Sometimes you need to add a slight rotation  to make it more smooth.

 

Keep in mind that browsers will sometimes animate your image jerky or with jank (lost frames) due to the size of the image it has to animate and move around the DOM.

 

So try adding a slight rotation: 0.01 to your tweens that translate the x property:

 

See the Pen aNmxwm by jonathan (@jonathan) on CodePen

 

But here is a better way on animating a background-position horizontally, which i prefer over the above method, instead of animating a <img> tag in x (translateX) and appending multiple divs.

 

The below example just animates the CSS background-position property:

 

See the Pen YyMKMz by jonathan (@jonathan) on CodePen

 

I hope this helps!

[Daf Sirka]

Hello Jonathan

 

Thank you for your fast replay and the tips!

Only this didn't solve the problem In Safari 8 the animation stays jerky. Do you maybe have another solution? Or does anyone else have any ideas?

Or could it be possible this problem comes from Safari 8 itself? Because maybe its refresh rates are lower than for example Chrome?

Thanks again!

Daf

[Jonathan]

That is why your best bet is to use my example that just animates the CSS background-position property.

 

The example your using will be jerky due to animating an 2 image tags directly, since you clone and appended the same image tag. So this is not a GSAP thing, but the way browsers try to animate 2 very large images in the DOM.

 

Whereas

See the Pen YyMKMz by jonathan (@jonathan) on CodePen

is only animating the CSS background-position property. I would suggest you use my example as a starting point since it doesn't clone, append and animate 2 DOM elements (2 very large img tags) which can be causing that jerkiness even more on Safari.

 

Better to just animate the background-position of the background-image,

See the Pen YyMKMz by jonathan (@jonathan) on CodePen

[OSUblake]

@Jonathan

 

Just curious. Do you know if browsers perform any type of culling on stuff that is out of the viewport or hidden by overflow? So by culling, I mean does it completely remove it, or is still using resources to calculate everything as if it were visible? I couldn't find anything, but I know that culling is used a lot in 3d to improve performance.

[Jonathan]

Great Question Blake,

 

Most of the time it is best to add display: none to elements you don't want to animate anymore (after killing their tween or timeline). Or you could kill and then remove from the DOM. But some people will leave the element in a state of visibility hidden and opacity or both. But according to the spec, elements with visibility hidden or opacity still take up layout. And then that means they are subject to affecting the elements around them that get calculated for layout, as well as their children. But they dont get re-painted, but can still affect performance since the animation could be affecting layout even if hidden.

 

I know that Firefox used to have an issue when elements were set to display:none, that the animation would still run. It would keep painting the element but not push the element to the compositor since it was outside of the viewport or had display none. But they fixed this bug so their refresh driver would kill these animations that were out of the viewport or have display none.

 

https://bugzilla.mozilla.org/show_bug.cgi?id=962594

 

But a new bug just creeped its ugly head in Firefox:

 

Invisible Paint-only CSS animations are still restyled every refresh driver tick: https://bugzilla.mozilla.org/show_bug.cgi?id=1166500

 

There was also another thing that Firefox did that Chrome and Safari don't do. I forgot exactly what it was. But basically it would stop an animation when it was hidden and or outside the viewport. But for the life of me i cant figure out what exactly it was. But now i have to find out since i forgot and it will bug me until i remember.

 

Ahhh.. i remember now.. it had to do with GIF animated images. Firefox will stop the animated GIF images from running their animation when hidden. Whereas Chrome, Safari and IE will allow the animated GIF to just keep animating even when hidden or out of the viewport.

 

I know some people just kill their timelines and tweens, and then add display:none and pointer-events:none to make sure they are in the penalty box until needed again.

 

[OSUblake]

Wow! Thanks for the awesome response.