Safari Bug(s) - 1 pixel jitter

[stephenburgess8]

Hello all. I have been using your fine library to animate a set of banner ads for a client going live soon.

Fairly late in this process, a team member discovered a 1 pixel jitter or wiggle only in Safari.

 

We are using Google DoubleClick, and we also have a private viewer to show clients ads.

In both cases, after uploading these animated ads, in Safari the ad will shift back and forth by about one pixel while elements in it are animating.

 

To phrase it in a different way, when the ad is on a page within an iFrame, the iframe or possibly the container it's in shifts side to side in a wiggle by about one pixel.

 

The animations display slightly differently in Safari as opposed to Chrome.

This is not as significant as the jitter.

 

This has been found in Safari Version 9.0 in OSX El Capitan and Yosemite.

 

I stripped the ad of any client-specific images, text, or information and uploaded it to CodePen to try and isolate what's going on.

I also had to strip out all the DoubleClick specific code because CodePen would not allow it to run with that code.

 

I really have to apologize because this is very ugly at the moment as I try to debug this.

 

So far I have not been able to get the iframe to jitter in CodePen.

However in the "Details" view, the animation is affecting the font weight of the page header text!

I feel like this is related. I am at wits end.

I'm hoping that if you look at it here and can understand why the font is changing during animation,

it will help me understand why the ad is affecting its container during animation in Safari.

 

EDIT: To be clear, right now the behavior I'm asking for help debugging is in CodePen, that the font weight of the header in the top left is flickering during the animation of my banner ad. I think this must be caused by the same thing that is making it jitter in Google DoubleClick preview and in our internal adviewer page, which also uses iframes.

 

Any help would be much appreciated. Best,

 

Stephen

 

Link:  http://codepen.io/stevium/details/WQdEyG/

See the Pen WQdEyG by stevium (@stevium) on CodePen

[Jonathan]

Hello stephenburgess8 and welcome to the GreenSock Forum!

 

webkit is notorious for bad anti-aliasing on text in both chrome and safari. webkit has a bug both webkit (chrome blink) and webkit (apple) when trying to scale text above zoom factor of 1. Chrome several months ago fixed the bug last year, but the bug came back several months ago.

 

You could try:

• setting force3D:false on your tween since force3D default is "auto". force3D is part of the CSSPlugin. This works due to webkit z-axis bug, even when at zero
• If that doesn't work try and add transformStyle:"preserve-3d" and transformPerspective:1000 on the element to stop the pixelation when animating.
• or you can set your element as big as it would be when scaled to a zoom factor of 8. And then have your scale animate from scale:1 to scale 0.8 or scale:0.5 .. making it basically scale down to the size your scaling from now. This is because that scale pixelation bug does not affect a scale zoom factor below 1.
• Sometimes adding a slight rotation of rotation:0.01 helps with jitter, and also z:0.01

This example below scales an element from zoom factor 1 (which is the default zoom factor) to below that so you dont get that blurry text while transforming your element.

 

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

 

See if that helps and let us know!

 

Note that in codepen your code is run through an iframe. You can try and view your code with this link. http://codepen.io/stevium/debug/WQdEyG/ using debug mode in codepen.

 

debug mode in codepen does not run your code through an iframe.

 

[ohem]

Try Force3D:false in the Greensock code, or -webkit-font-smoothing: antialiased; in the CSS.  Both can help with text jitters.

[stephenburgess8]

Jonathan and ohem,

 

Thank you for your quick responses. This is not the first bug I've encountered with webkit and it won't be the last.

 

Since I have a long timeline with many tweens in many iterations of this ad, I opted for
 

"CSSPlugin.defaultForce3D = true; "

 

which, as far as I am aware, sets the global value of Force3D in all tweens.

I'm not sure if this would also work if it were set to false, I plan to test that soon.

However, tentatively, I haven't seen any jitters since I added this line of code after my master timeline declaration.

I'm going to continue testing to make sure, but as of right now this is what is working in my code.

 

Thanks again for your quick response, you set me on the right track after a couple of hours unsuccessfully Googling about this bug.

 

Thank you!