Jump to content
GreenSock

omnider

IE 11 subpixel animation bug

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,

 

I just came across an issue that is not directly related to GSAP but I have a feeling it could affect a lot of people using it. I was getting some "shaking" unwanted effect in IE11 when scaling up an image (either img or div with background-image). After some playing with it I realised the scaling itself is actually fine. IE11 is capable of using subpixel animation for scale transformation, but it cannot (or it appears to) subpixel animate position of an element. 

 

I went the usuall way of adding force3D attribute to my tween with no effect. When inspected, the element appears to be tweening decimal values, but the result on the screen doesn't seem that way.

 

I created this pen - 

See the Pen EjsJy by omnider (@omnider) on CodePen

  where you can play with various ways of tweening this. You'll be able to see that the animation isn't smooth in IE11. This doesn't seem as terrible as when you use background image on div with background-size:cover,

which can be seen here - 

See the Pen waAyg by omnider (@omnider) on CodePen

(madness)

 

If anyone could confirm this strange behaviour that would be awesome. Even better if someone could suggest a fix :)

 

Cheers

Link to comment
Share on other sites

Mhh, the issue could be moving the element along the axis.

 

Creating another transformOrigin point could be an option?.  I'm seeing better results (not excellent but an improvement from the original code) with this:

TweenMax.to($('.image'), 10, {scale:1.1, repeat:-1, transformOrigin:"50% 0%", force3D:true})

Here's for the <img> tag:

 

See the Pen srgbK by anon (@anon) on CodePen

 

And here for the <div> with the background image:

 

See the Pen gsftl by anon (@anon) on CodePen

 

Rodrigo.

Link to comment
Share on other sites

Well the desired effect is to scale with the origin in the center. Yes, when you move the origin to "0 0" it's flawless, because like I said IE11 doesn't seem to be having trouble with subpixel animation of scaling an object, it rather struggles with animation along axis for some reason.

  • Like 1
Link to comment
Share on other sites

Yep I forgot that part in my question. Is it necessary to translate the element?

 

Also is somehow common for long animations to present this type of issues. Another question is possible to reduce the tween duration?, in order to create a better effect you could also remove the natural easing function GSAP has (I can't remember if is Power2 or Power1 easeIn), that creates a complete linear animation and improves performance as well.

 

You mention that the idea is to animate it from the center, why don't you set the transfrom origin to that particular point?:

TweenMax.to($('.image'), 5, {scale:1.1, repeat:-1, transformOrigin:"50% 50%", force3D:true, ease:Linear.easeNone});

The best result is using an <img> tag, I'll recommend you go in that direction and reduce the duration as much as possible:

 

See the Pen srgbK by anon (@anon) on CodePen

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Yep, it has to translate from the center. Well technicaly it doesn't. That's why I tried the workaroud with translating from 0 0 and just moving the div along axis, which gives the same result.

 

I can't faster it up unfortunatelly, it has to go this slow.

 

Changing the ease doesn't really help (I actually use linear ease in this case, I just forgot to paste it into the pen)

 

TweenMax has transformOrigin:"50% 50%" set by default, you don't really have to specify it like this (that's the tween in my pen commented under "normal scale").

 

This post is here basically to explain the IE11 weird behaviour in this particular situation. Changing the look of the tween in any way is not an option and for now we just disabled the scaling effect completely in IE11 .. But I have a feeling that the lack of subpixel animations in IE11 will affect a lot of people and simply disabling all animations that need it isn't an ideal solution. 

Link to comment
Share on other sites

Have you tried reducing the size of your image .. right now it is 1920px by 1079px.. so that is a very large image your asking the browser to transform. Anyways..

 

Back to the task at hand.. When i look in the console, i see IE11 using sub-pixels when scaling.. so there are some things you can do to help with this issue:

 

Working example (no shaking), view in IE11 :

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

  • Its best to have the element your transforming, be absolutely positioned, so you can take the element out of the flow of the document.  And adding position relative to the absolutely positioned elements parent.. so this way you have an absolutely positioned element, relative to their parent.
  • Also its good to add a slight translateZ  (z) to the element and a slight rotateZ  (rotationZ) to get it more smooth. Firefox has that same type of issue, but the slight rotation on Z axis and translateZ helps this.
  • One last thing is to make sure the image is loaded before trying to animate it... by using a window load event.

You should notice that it is more buttery smooth in IE11 now:

$(window).on("load", function() {

    var resWidth = $('.image').width() / 100 * 110,
        resHeight = $('.image').height() / 100 * 110,
        diffX = (resWidth - $('.image').width()) / 2,
        diffY = (resHeight - $('.image').height()) / 2;

    // scale from 0 0 and animate x and y
    TweenMax.to($('.image'), 10, {
        css: {
            scale: 1.1,
            x: -diffX,
            y: -diffY,
            z: 0.1, /* add this for the jitter bug */
            rotationZ: "0.01deg", /* add this for the jitter bug */
            transformOrigin: "0 0",
            force3D: true
        },
        repeat: -1
    });

});

Let us know if that helps? :)

  • Like 4
Link to comment
Share on other sites

  • 1 year later...

Hi,

 

I got back to this problem after a while and the solution is quite trivial. simply add "rotationZ: '0.01deg'" to the animation and IE seems to be handling everything just fine :)

 

cheers

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Hi,

 

I got back to this problem after a while and the solution is quite trivial. simply add "rotationZ: '0.01deg'" to the animation and IE seems to be handling everything just fine :)

 

cheers

 

Lifesaver! Works perfectly

Link to comment
Share on other sites

wow what a crazy fix!  Thanks for that...

Link to comment
Share on other sites

Your welcome, I'm glad to help..  Happy Tweening!!!

Link to comment
Share on other sites

Hi all!

I haven't better knowledge, but i using GSAP for years in local expirements!

See the Pen doaKoZ by anon (@anon) on CodePen

- This pen is working best without any tricks!

No translateZ (null 3d hack), No force3D, No RotateZ! Works good for me!

GSAP is stable for years and cannot be issue/bugs! Maybe issue with users CSS!

 

Sorry for my bad english

Link to comment
Share on other sites

Hello dalisoft, and welcome to the GreeSock forum!

 

What browser are you using?

Also what OS are you using?

 

The shaky issue above was due to browser bugs, not gsap. All modern browsers have this behaivor. Its a matter of tweaking the CSS properties to overcome these browser bugs that span across Windows and Apple operating systems.

 

I appreciate any additional information :)

  • Like 1
Link to comment
Share on other sites

I'm using:

OS: Windows 10 Multiple Edition

Browser: Microsoft Edge

 

Note:  Default, no DEV panel used, before has issue, in my last pen issue/bug fixed!

 

Did you compared with my demo and first demo in Microsoft Edge? I tested and works best, i think bug with CSS and GSAP usage!

 

UPDATE:

I think some difference may be affect this:

1) transformOrigin set via TweenMax.set!

2) CSS Styling!

 

 

post-21901-0-24197600-1438863650_thumb.png

 

My PC language is Russian, sorry for that

Link to comment
Share on other sites

No worries thanks for the explanation. :D

 

The above sub-pixel IE11 bug has nothing to do with GSAP. CSS properties will behave differently in each browser due to each browser like Firefox, Chrome, and Safari using different rendering engines.

 

For example.. Firefox uses the Gecko rendering engine. Safari uses WebKit. And Chrome uses a fork (copy) of WebKit that they modified and updated called Blink.

 

GSAP is just animating those CSS properties in the browser. But different rendering engines apply those properties in different ways sometimes due to bugs in the engine and browser... or lack of support for that CSS property.

 

Since you said that on  the new Windows 10, that the new Microsoft Edge browser animates smooth. That tells me that Microsoft finally has fixed some of the previous transform bugs that are still present in IE9, IE10 and IE11.

 

For example IE10 and IE11 still don't support transform-style:preserve-3d. That is not a limitation of CSS or GSAP, but a limitation of Microsoft CSS support in their browser.

 

In addition to that every time Microsoft updates their internet browser they fix previous browser bugs. So its a good thing that Microsoft has finally updated their browser to support the current CSS spec for transforms. Since Microsoft has been dragging its feet for the past 10 years.

 

But this is no way due to GSAP or CSS, but just simply Microsoft fixing their buggy browser. :)

  • Like 1
Link to comment
Share on other sites

I have far from slagging GSAP off, I've been using Greensock since Flash times and it's the best tweening engine I know.

 

BUT

 

Since it moved from Flash, the environment where it behaves the same pretty much on anything, it needed to adapt to different browsers requirements. Not calling this a bug would be like saying that if GSAP didn't add browser specific prefixes to all the CSS atributes it wouldn't be a bug but merely an inability of browser makers to follow the W3C recommendations. Ipso facto, having to hack around css properties on specific browsers to have a smooth animation is a bug and as such should probably be fixed for the sake of saving people time browsing through forums searching for something that everyone would love to have out of the box (or maybe in a form of plugin to save the core size of course ... I don't think IE deserves that much attention anyways :D )

 

Just something to consider perhaps

Link to comment
Share on other sites

Hi Omnider,

 

This topic is over a year old with many demos using out-dated versions of TweenMax.

If you feel there is a bug in GSAP please start a new thread that clearly describes the issue and contains a demo using the latest version of TweenMax.

 

Thanks.

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