Jump to content

Kurrent Kurt

DCS Banner Performance Issue (Redraw) With Mac Safari 8

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!  

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

Thanks for letting us know, Kurt!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.