Weird wiggle in iOS safari

[martis]

I got the latest codebase and was looking at my site on ipad.

 

http://www.thegeminisociety.com

 

I notice that when the "OF" animates on it wiggles.

 

Any suggestions?

 

Here is my code

 

JS

function animateAboutUs() {
  TweenMax.staggerFrom([$sons, $of, $zeus], 1, {css: {width:"0"}, ease:Quad.easeOut, delay:1}, .5)
  TweenMax.set([$sons, $of, $zeus], {css: {autoAlpha:1}});
  TweenMax.to($introCopy, 1, {css:{opacity:1}, ease:Quad.easeOut, delay:3});

 }

 

CSS

#of {
background-image: url('../img/logo-of.jpg');
width: 400px;
height: 204px;
opacity: 0;
filter:alpha(opacity=0); /* For IE8 and earlier */
}

 

 

UPDATE: I changed the width of the div from 400 to 600 and it seemed to help it a bit.

 

I wonder if it has anything to do with the WebkitPerspective or WebkitBackfaceVisibility fixes

[GreenSock]

I can't see any "wiggle" at all on iOS. I refreshed several times. Looks fine. There is no WebkitPerspective stuff in there (unless you added it) and I don't know how/why WebkitBackfaceVisibility would cause "wiggle".

 

Is anyone else able to see the wiggle? [scratching head]

[martis]

The wiggle is most apparent on 1st gen ipad.

 

Looks like the background image is shifting left and right 1 pixel while it plays (towards the end of the tween).

[GreenSock]

I don't have one of those, but I'm pretty confident there's nothing we can do about it. As you've seen iOS Safari has proven to be unbelievably buggy and we have implemented the best workarounds known, but if you come across anything that improves things, I'm all ears.

[martis]

Yeah, it's odd... this wiggle just started appearing.

 

Do you have older versions I could test against? Maybe pre any iOS fixes?

[GreenSock]

I have attached a recent version with the iOS fix commented out. I do NOT recommend using this, of course. If I had to choose between a slight wiggle on 1st generation iPads only or violent flickering on all iOS devices, I'd certainly choose the slight wiggle.

CSSPlugin.zip

[martis]

Thanks for posting this.

 

I actually moved away from tweening the WIDTH of the div and put a div OVER the background image with a white background and am scaling the scaleX of that white cover to achieve the same effect. No wiggle anymore! I don't think iOS liked changing the width of a div, with a background image, at a zoomed out viewport