DCS Banner Performance Issue (Redraw) With Mac Safari 8

[Kurrent Kurt 8 Likes (Newbie)]

Hi. I have been using JSAP for about a year (Flash user forever) and used the TimelineMax to create a rotating carousel of 5 icons in a banner ad. I don't use any 3D, I just scale and change the zIndex. I also set any unused images to autoAlpha:0.

 

Testing the banner works great on all browsers (IE 10 as well). The only issue is with Safari 8 on the Mac. Testing locally it animates fine, but when using the external preview link in DoubleClick Studio (DCS) I see some redraw issues in some of the images. It's never the same ones and sometimes appear as black rectangles or similar to a TV screen with a bad picture.

 

It's a current project, so I can't share a link and can't reproduce with an example on Codepen.

 

I have another project with similar images and actually using 3D rotation with no problems in Safari 8! Thanks!

 

Anybody else have a similar issue? I'm scratching my head on this one!  

[GreenSock 18,251 Likes (Superhero)]

Pretty tough to diagnose blind, but here are a few things to try:

1. Temporarily set CSSPlugin.defaultForce3D = false and see if that helps at all. If not, try setting it to true. Neither may help at all - I'm just taking a stab here. Usually the "auto" mode is ideal and you shouldn't have to do anything. 
2. Apply a very slight rotation to the stuff you're animating (literally, like rotation:0.1 is fine). Again, probably won't help but worth trying.
3. Set backface-visibility in your CSS (?)

This may just be an issue with DoubleClick Studio. It also could just be an odd rendering bug in Safari (GSAP has no control over browser rendering)

 

Let us know if you have any luck. 

[Kurrent Kurt 8 Likes (Newbie)]

Jack, I will try those ideas. I do believe it is a problem with Safari, but wanted to see if there were any work-arounds. Oddly enough, the 5 images I have in the carousel look fine (even zIndex), it's the redraw on some other images (just doing scales or transition along x axis) and jerky animation that is frustrating. I owe you a taco.

[Kurrent Kurt 8 Likes (Newbie)]

So testing locally in Safari 8 on the Mac shows no performance issues, so I'm also reaching out to our contact at DoubleClick to see if they have any ideas.

[Kurrent Kurt 8 Likes (Newbie)]

Update: the DCS technical team is working on the issue. They were able to reproduce the problem.

[Kurrent Kurt 8 Likes (Newbie)]

Solution! DoubleClick Marketing support was very helpful in helping solve this issue. CSS flicker issue: http://stackoverflow.com/questions/25010353/safari-css-transition-flickering

 

1. Upgrade to the newest version of Safari (not ideal, since some users won't realize this is an issue)
2. Add the property transform:translate3d(0,0,0); to the background image.

I hope this saves others some time!

[GreenSock 18,251 Likes (Superhero)]

Thanks for letting us know, Kurt!