Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kanst

Glitchy scaling transitions in Chrome and IE

Go to solution Solved by Jonathan,

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 Greensock Forum, 

 

Within the last week, somehting caused my elasitic animations to be "glitchy" in Chrome and IE. 

It works fine and is still smooth in Safari.

 

Sample animation code snip from timeline : 

.from(p1, 1.3, {autoAlpha: 0, scale:.1, ease:Elastic.easeOut.config(1, .5)}, .7)
 
(any .png image i animate like this gets a unsmooth transition/animation in the named browsers now.. used to be smooth only a week ago!? and as stated, it still is in Safari..) 
 
Info
Chrome version: Version 53.0.2785.116 m
 
 
 
Anyone else getting this problem? 
Can't seem to find any info on recent Chrome updates (that makes sense anyways) 
 
Any help will be much appreciated, 
Thank You in advance. 
 
/simon
Link to comment
Share on other sites

This sounds like it has to do with the Chrome 53 bug regression.

You can read about it here: http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-3

 

We have a lengthy ongoing discussion with the Chrome team here: https://bugs.chromium.org/p/chromium/issues/detail?id=596382#c85

 

It is clearly a Chrome bug and at this time none of their suggested solutions really work  :|

 

My assumption is that you are scaling a div with a background image. If that is the case you can switch to using an <img>.

 

See the video we provided to the Chrome team: 

 

Also try setting force3D:false on the tween that is an issue.

 

We haven't heard about any issues in IE but it certainly is concerning. 

If you can share a reduced test case using CodePen it would really help. 

 

Also consider sharing your frustration on the Chrome thread. We get the sense they don't understand how badly this impacts users.

 

Very sorry for the trouble, we are doing our best to figure something out. Our hands are a bit tied at the moment.

 

c

  • Like 1
Link to comment
Share on other sites

  • Solution

Hello,

 

Try adding the below as a temp fix until Chrome Dev Team fixes this jitter blur bug ..

 

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

 

if you cant switch to an <img> tag then just add the below to the parent of the element with the transformed background-image:
 

.parent_of_child_with_bg_and_transform_scale {
    -webkit-backface-visibility: hidden;     
    -webkit-perspective: 1000px;
}

Resource:

http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-4#entry65415

 

:)

  • Like 2
Link to comment
Share on other sites

Hey Kanst, this also sounds like it may be the problem I encountered, a bug in Chrome v49 and v53 that affects the scale motion on image tags:

 

http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-4#entry65694

 

Jonathan helped me fix it in Chrome using -webkit-backface-visibility:hidden; on the <img> tag, but it's still kinda jittery in IE.

 

Here's a pen to illustrate it better: 

See the Pen WGkZWO by xgraves (@xgraves) on CodePen

 

Let me know if that helps.

Link to comment
Share on other sites

Hi Guys, 

 

Thanks a lot for the inputs! 

 

- It fixed the Chrome issue! :-)

 

- But unfortunately the problem persists in IE :-(

Anyone have an answer/explanation for this?  

 

Oh.. and for anyone working in Edge, this is the code for the Composition Ready: 

 

var stage=document.getElementById("Stage");

sym.$("stage").css("-webkit-backface-visibility","hidden");
sym.$("stage").css("-webkit-perspective","1000px");

 

 

Thx again. 

/Simon

Link to comment
Share on other sites

Hello Kanst,

 

Keep in mind that in IE11, that you have to remove the -webkit prefix since IE does not use webkit only MS Edge does

// in IE11 try this on the parent no webkit prefix
.parent_of_child_with_bg_and_transform_scale {
    backface-visibility: hidden;     
    perspective: 1000px;
}

// or in IE11 try this on the element itself no webkit prefix
.child_with_bg_and_transform_scale {
    backface-visibility: hidden;     
    transform: perspective(1000px);
}

If this doesn't help, that is probably a different bug in IE11. You might have to report that to Microsoft Dev Team.

 

https://connect.microsoft.com/IE/content/content.aspx?ContentID=29582

 

:)

  • Like 1
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.
×