Text get fuzzy on IPhone safari

[JoeHetfield]

Hi, everyone.

 

I'm doing a website with GSAP. everything goes well except I check it on my iPhone with iOS 8.1.3

 

After applied some 3d transform on a group of divs, the text became quite fuzzy. here is the link:

 

http://eb.selink.jp/about-us

 

I checked on the style which gsap appended on them. it is :

-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00125, 0, 0, 0, 1);

The "-0.00125" screwed everything  up, if I change it to 0 manually, the text got fine.

 

This didn't happened on other kind of browsers. Again, I think it's a bug on safari.

 

is there anyway work around this?

 

thanks.

[Jonathan]

Hello JoeHetfield, and welcome to the GreenSock Forum!

 

This issue is webkit bug, not a GSAP bug. Webkit is notorious for blurry looking text while or after a transform. It usually has to do with the way and what CSS properties you are animating.

 

I didn't know which items on that page you needed help with. Could you please be more specific on what element or elements?

 

But anyway, The best way to deal with this is to either use force3D:"auto" on your tweens so GSAP removes transforms from elements that no longer need it after being transformed.

 

Or you need to tweak the way you are using perspective and transformPerspective.. I didn't really see any use of perspective on your page. But you will have to play with perspective and transformPerspective since webkit will act weird depending on the CSS properties being used on your elements. So you have to try either of the perspectives to see if it helps.

 

Also if possible can you provide a codepen link.. so we can debug and test your code live. Since going through a full html page of your code, can be time consuming with all the unnecessary css, js, and html. It just has to be limited example with just the code you are having an issue with.

 

We love code we can test live.. so we can focus on troubleshooting the issue to help you better.

 

Thanks!

[Carl]

Yeah, a demo with a single tween on a single div (or group of divs) will really help us. 

Your problem may be due to a rounding error somewhere (in Safari or GSAP). 

 

Concerning force3D:auto, in GSAP 1.15.0+ force3D:auto is the default for all tweens that can benefit from being offloaded to the GPU on a 3D layer. 

When force3D:auto is in place, elements will be "layerized" during the tween (using transform:translate3d()) and then placed back into 2D space (transform:matrix()) when the tween completes, automatically.

If you want to override that in a particular tween you can use

TweenLite.to(element, 1, {x:200, force3D:false}) // will not ever use translate3d() during the tween.

//or

TweenLite.to(element, 1 {x:200, force3D:true}) // will use translate3d() during tween and leave the element layerized AFTER the tween completes

To set the force3D behavior across the entire engine use

CSSPlugin.defaultForce3D = true;
//or
CSSPlugin.defaultForce3D = false;

[ohem]

 

Yeah, a demo with a single tween on a single div (or group of divs) will really help us. 

Your problem may be due to a rounding error somewhere (in Safari or GSAP). 

 

Concerning force3D:auto, in GSAP 1.15.0+ force3D:auto is the default for all tweens that can benefit from being offloaded to the GPU on a 3D layer. 

When force3D:auto is in place, elements will be "layerized" during the tween (using transform:translate3d()) and then placed back into 2D space (transform:matrix()) when the tween completes, automatically.

If you want to override that in a particular tween you can use

TweenLite.to(element, 1, {x:200, force3D:false}) // will not ever use translate3d() during the tween.

//or

TweenLite.to(element, 1 {x:200, force3D:true}) // will use translate3d() during tween and leave the element layerized AFTER the tween completes

To set the force3D behavior across the entire engine use

CSSPlugin.defaultForce3D = true;
//or
CSSPlugin.defaultForce3D = false;

 

Hi, is there a way to turn off Force3d for a specific element using TimlineLite?  (It seems to only work for TweenLite, unless I apply it to the entire engine, but I'm concerned that applying it to the entire engine could cause performance issues).  I definitely want to avoid the blurry text bug in Safari though.

[Jonathan]

Hello ohem, and welcoem to the GreenSock Forums!

 

You can do as Carl suggested above and apply force3D:false using the GSAP set() method:

TweenLite.set(element, {force3D:false});

Also force3D is part of the GSAP CSSPlugin

 

force3D

As of 1.15.0, force3D defaults to "auto" mode which means transforms are automatically optimized for speed by using matrix3d() instead of matrix(), or translate3d() instead of translate(). This typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In "auto" mode, GSAP will automatically switch back to 2D when the tween is done (if 3D isn't necessary) to free up more GPU memory. If you'd prefer to keep it in 3D mode, you can set force3D:true. Or, to stay in 2D mode whenever possible, set force3D:false. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details about performance.

 

Resources:

set(): http://greensock.com/docs/#/HTML5/GSAP/TweenLite/set/

CSSPlugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

I hope this helps!

[ohem]

That works for Tweenlite, but does not seem to work for TimelineLite which is what I'm using.

[Jonathan]

Are you including the CSSPlugin? force3D is part of the CSSPlugin.

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TimelineLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script>

Or you can just use TweenMax which extends TweenLite, adding many useful (but non-essential) features like repeat(), repeatDelay(), yoyo(), updateTo(), and more. It also includes many extra plugins by default, making it extremely full-featured. Any of the plugins can work with TweenLite too, but TweenMax saves you the step of loading the common ones like CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin as well as EasePack, TimelineLite, and TimelineMax.

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>