Jump to content
GreenSock

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

IE9 - Scale and animation skipping

Recommended Posts

I've looked around this website and the internet at large for a little help, but I'm not sure I'm even searching for the correct thing. The problem I'm having is that the scale attribute, as it's applied inside a TweenMax.to( ), seems to stutter to the point of essentially skipping the animation to the final frame in IE9. Unfortunately the deployment environment I'm working with is Windows 7 with IE9 strictly, so my options are limited. I believe GSAP works fine in IE9 -- all of the animations work pretty much as expected on this website's showcase animations.

 

Here's how I have my setup:

1. The page is framed by the Twitter Bootstrap Framework

2. Other scripts exist alongside GSAP: jQuery most notably.

3. The calls to TweenMax.to( ) are being made sequentially with a timed delay rather than being a part of a timeline. Most of the animations do not run over one another.

 

Things I've tried:

1. Changing the scale value to "msTransform":"scale(1.4,1.4)" seems to have no effect -- no effect at all that is, scale no longer happens at all. I assume the value scale:1.4 makes the call to the proprietary values anyway.

2. Removing and manipulating animations around this one to isolate it as the singular animation.

 

This exact effect was also happening with a translation when using x and y but was corrected by using left and top. Not sure if that helps determine what I might be doing wrong. I have a feeling it's not directly GSAP related but thought I might find some insight here over what could be causing the problem. 

Link to post
Share on other sites

Hello DotFreelance, and Welcome to the GreenSock Forums!

 

There could be a number of things causing that behavior in IE. IE is notorious for not playing well with others. But I do have some questions:

  • Is this an actual PC Windows 7 or a virtual / vmware environment?
  • Is this in real IE9 standalone or is it rendering IE9 in one of the fake rendering Document Modes in IE11 or IE10?
  • Is the Document Mode IE9 Standards?
  • Do you have your elements with CSS position absolute or relative?
  • For elements in IE9, did you give them the CSS property zoom:1 to make sure IE gives the element hasLayout?
  • What does your code look like for your tweens?

As you can see without a code example for context it will be hard to even know what IE9 is doing.

 

But we can help! Here is a nice video tut by GreenSock on How to create a codepen example demo.

 

We love code that we can see and edit in a live environment.. this way we can help you better by seeing your code in action.

 

Thanks! :)

  • Like 1
Link to post
Share on other sites

Thanks Jonathan,

 

The code I'm working on is an animation sample. I'm attempting to find out what works best or at all for IE9 since that is our production environment as it stands. Other production environments will be used including mobiles, but the IE9 environment is the primary.

 

Here's a small bit of what I have:

See the Pen nwjeD by DotFreelance (@DotFreelance) on CodePen

 

The testing environment is a virtual machine ( VBox ) of Windows 7 Enterprise SP1 with IE9 and has been given access to two logical CPUs, 2GB of RAM, 256MB VRAM and 2D/3D acceleration. The host is a maxed 27" mid-2011 iMac.

 

My elements are positioned relatively with CSS. I've tried adding zoom:1 to the style of the exterior element but to no avail.

 

The issue only seems to occur with scaling, not with translation ( anymore. ) Removing the text-shadow animation doesn't seem to make a difference. These elements are all within a larger frame that is brought into focus using an opacity transition. That container is also constrained to the size of the window, and overflow has been set to hidden for both x and y.

 

The help is really appreciated!

Link to post
Share on other sites

Thanks for the example.. its a big help!

 

Try testing this in IE9.. my tests showed that it was smoother with no hiccups.

 

i modified your example, test this in IE9:

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

 

This is what i did:

  • I converted your top property to y (translateY) .. because top can only animate on a pixel level (ie.. 25px) vs y that can animate on a sub-pixel level (ie.. 25.999px) so you don't get pixel snapping.
     
  • I added force3D: true to your tweens that were using autoAlpha and now the y property to force hardware acceleration for a better performance. force3D is part of the CSSPlugin.

    force3D - when you set force3D:true, it forces GSAP to apply a 3D value to the element's transform, meaning matrix3d() instead of matrix(), or translate3d() instead of translate() which typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In other words, setting force3D:true usually boosts performance, making movement more smooth. However, if you exceed the GPU's memory limit, performance will degrade, so it's not wise to force3D:true everything all the time. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details. In our experience, though, it helps performance more often than not. The default value is false.
     
  • I set the position:relative in the CSS instead of inline.
     
  • For IE you can't just use opacity since it is not supported in lower version of IE.. you have to use filter: alpha(opacity=50) .. but you can just set the opacity cross browser with GSAP using the set() method which you will see in the codepen link above.
     
  • I added filter: inherit to your spans, that are children of your h3 #TweenTest4 to make sure in IE if it's parent is set to opacity zero, that it's children inherit that opacity value.
     
  • Also keep in mind in GSAP.. you will notice that I made all your jQuery css() to GSAP set() so this way you have GSAP setting your CSS values so it can keep track of what properties you have it setting, changing, and animating.

One last thing .. make sure that IE9 is using Document Mode IE9 Standards and make sure Compatibility Mode is unchecked, found in:

 

Tools > Compatibility View Settings

 

Then make sure these are unchecked:

 

Display intranet sites in Compatibility View

Use Microsoft compatibility lists

 

Then click Close

 

Let us know if this helps? :)

Link to post
Share on other sites

Jonathan,

 

The code pen I have created works fine in IE9 on the VM. Changes here were unnecessary: the code pen does not replicate the issue, unfortunately.

 

Application of force3D doesn't seem to have an effect on the live file. I've spent some time reading a few articles here and blogs regarding performance using alternate threads or by using additional composite layers, but this doesn't seem to solve this particular problem. I fear it's something else interfering with the animation cycle, but I can't think of what it might be.

 

Using y or x instead of top or bottom creates a massive performance decrease in IE9 with the live file. 

 

I've also moved all styles from inline to the CSS block in the live file to no avail.

 

The opacity property appears to be fully supported in IE9 and at least partially supported in IE8 -- although IE8 is not a concern for me at this point. Fortunately, opacity transitions work wonderfully in the IE9 instance and so do translations. They're all acceptably smooth. The animation issue seems to affect only the scaling and any animations happening during the scaling. The animation begins, may play for a frame or two, then skips to the end of the animation. It's quite jarring, as the rest of the animations look fine.

 

I wasn't able to find the Tools > Compatibility View Settings in IE9, however I opened the developer tools and made sure that IE9 is set to Browser Mode: IE9 and Document Mode: IE9 Standards.

 

Realistically I feel as though it's an inherited property from some other framework, since the animation works fine in the code pen in the virtual machine's IE9. The suggestions you're providing are the sort of thing I need, the sort of thing that might be the tweak that fixes the issue.

 

This isn't the only issue, but it's certainly the issue I'm focusing on for now. Hopefully these hints will get me that much closer. I'm going to start systematically removing frameworks that are non-essential until I figure out what is causing the issues. If I find something specific, I'll report back. If you think of anything that would be a good jumping point, let me know. :)

Link to post
Share on other sites

Alright cool.. i have one more questions.

 

In your codepen example i didn't notice any from() tweens... are using any from(), fromTo(), or staggerFrom() tweens in your local code, that weren't included in your codepen example?

 

Thanks :)

Link to post
Share on other sites

Hmm I'm not sure what would cause rendering to stop for the majority of a tween (and I can't reproduce it sorry) but IE9 does have some really stupid issues with transforms :( Here's one that causes scale values very close to 1 to render at odd sizes/positions:

 

See the Pen khEAp?editors=001 by jamiejefferson (@jamiejefferson) on CodePen

 

As you can see

See the Pen xABhL?editors=110 by jamiejefferson (@jamiejefferson) on CodePen

this one's a pure browser bug and not something that GSAP itself is causing... IE9 is bloody annoying!!

  • Like 1
Link to post
Share on other sites

Alright cool.. i have one more questions.

 

In your codepen example i didn't notice any from() tweens... are using any from(), fromTo(), or staggerFrom() tweens in your local code, that weren't included in your codepen example?

 

Thanks :)

 

I am in other portions of the code, yes. 

 

What I've come to conclude is that the issues are resolved when I remove a portion of the Bootstrap CSS. We're using Bootstrap 2.2.2 with the Responsive plugin -- that plugin is now built into Bootstrap in newer versions. Unfortunately, the newest versions of Bootstrap won't implement with any backwards compatibility, so it's not possible for us to move ahead in versions at this point. Any assistance going forward would be suggestions for what Bootstrap might be doing that could affect the performance of a scale operation in IE or any methods for testing and checking the procedures that are happening in IE in real time.

 

I'm going to be further investigating to see what options GSAP offers us -- what will work in the IE9 test environment.

 

If anyone can think of anything that might specifically affect the performance of these animations in IE9, I'd appreciate hearing your thoughts. :)

Link to post
Share on other sites

The problem, for those looking here at a later time for solutions, can be partially summarized as follows:

Using frameworks:

Bootstrap 2.2.2

Bootstrap Responsive

JQuery

JQuery UI

TweenMax ( the full GSAP platform )

 

The problem:

Certain animations hitch badly in IE, specifically IE9. The ones that were worst for me were scaling.

 

The solution:

Upgrading to Bootstrap 3.X where possible, removing the Bootstrap framework, or not using any absolutely positioned elements on the page at all.

 

The solution I chose:

I chose to remove all absolutely positioned elements. I was unable to choose to upgrade Bootstrap ( best choice ) and unable to remove Bootstrap ( worst choice. )

  • Like 1
Link to post
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.

×