Performance Tweak Issue / Google Chrome Update / Elements disappear

[Technics1210]

Hi,

 

i was updating my Google Chrome Browser to "Version 49.0.2623.75 m" and suddenly in my banners some elements disappeard, even they were loaded and "there" in the DOM.

 

I was using for every CSS element a hardware acceleration tweak boosting performance rendering on mobile, what always worked fine. Until now.

 

-webkit-transform: translateZ(0); 

-webkit-perspective: 1000;

-webkit-backface-visibility: hidden;

 

After a lot of testing i figured out that it is the "-webkit-backface-visibility: hidden;" - when commenting out, the hidden elements reappeared.

 

This problem occured with 1.17 and 1.18.0 (.2) - 

 

I was using only using in Tweenlite.set and .to "backgroundSize" and "opacity" on transparent 8bit-PNGs with multiple Layers on different DIVs.

 

Now the general question - is GSAP / Tweenlite already boosting performance with some "tricks" in the back - what could be the problem with the new Google Chrome version? 

 

-Rolf

 

@admin - i accidently did double post it in the "Banner forum", but could not delete the post.

[Diaco]

Hi Technics1210 

 

pls make a reduced Codepen Demo of your case/issue available : How to Create a CodePen Demo

[Jonathan]

Like Diaco advised it is better for us to see your code live so we can test it live!

 

We would need to see how your css, html and JS GSAP code looks like.

 

Chrome will allow a certain behavior for a time and then move the behavior so it matches the CSS spec. Those properties you mentioned above have certain quirks when used, so seeing your code in context can better help us help you! So a codepen demo example would be the best to see your code in a live editable environment.

 

Also GSAP can trigger hardware acceleration by the use of force3D: true.. the default is "auto". Please see the CSSPlugin docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

Thanks!

[Technics1210]

Hi Jonathan,

Hi Diaco,

 

thank you for your answer, i know, codepen would be great, but the sample is in a client-side secret  version which i first have to simplify.

 

It was just obvious after the upgrade of Google Chrome, "things" have gone wrong - at firefox / safari etc. everything was fine - as before.

 

I have to mention, that there are also HTML elements / divs with PNGs / Alpha transparency etc. in the banners which are NOT animated or used by GSAP but probably interact with the general "speed" of the animations, but this is a little bit off-topic.

 

So it is better to trigger (mobile) hardware acceleration by force3D:true, instead of my CSS-hack "-webkit-transform: translateZ(0); -webkit-perspective: 1000; -webkit-backface-visibility: hidden;" for GSAP used elements?

 

Because fast and smooth, little powerconsuming animation at mobile devices is very important for me, because i am doing a lot of display banners for mobile.

[Jonathan]

You can use both if you want.. but by default GSAP force3D is set to "auto". So after the tween animates it will remove the 3D transform. Basically hardware acceleration would be triggered for not just mobile devices with the CSS properties you have listed above. The hardware acceleration is also triggered on Desktop computers as well.

 

It states the following in the GSAP CSSPlugin Docs regarding force3D:

 

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.

By allowing GSAP to do it for you, you can prevent some instances where some of those properties like z (translateZ) could make the element blurry in a default state.

 

Also GSAP has a set() method so you can add those properties with GSAP. That way GSAP will handle any vendor prefixes for certain CSS properties that require a specific vendor prefix. set() Immediately sets properties of the target accordingly - essentially a zero-duration to() tween with a more intuitive name.

 

You dont have to share all your code. You can make a limited and reduced codepen demo with just the basics of what your animating with GSAP. Just a couple of tweens animating your element(s). So this way we can test your code live in codepen to better test your code in various browsers.