Parallax performance on IE

[benos]

Hi,

I'm getting a very clunky animation on IE (all versions) with a parallax effect on a large screen:

Test machine

• Lenovo T510, (8GB RAM, SSD)
• Internet Explorer 11

To reproduce

• open http://jsfiddle.net/1d4eerh1/5/ in IE
• make the view window really wide (1920px)
• scroll up and down (the parralax effect starts 1500px down)

Expected behaviour

• Smooth as butter animation, like on Chrome

Actual behavior

• Very clunky effect. Looks like it's jumping 10px with each tick

Notes

These guys seem to have worked around the problem by hacking an old version of ScrollMagic: https://www.tinkapp.com/en/
https://d3w3yyufttgvi.cloudfront.net/wp-content/themes/tink/js/lib/jquery.scrollmagic.js?ver=20150225.1505

They use 1.0.8 and commented out the following lines (starting at line #116):

// try {
//     TweenLite.ticker.addEventListener("tick", onTick); // prefer TweenMax Ticker, but don't rely on    it for basic functionality
//    _tickerUsed = true;
// } catch (e) {
     _options.container.on("scroll resize", onTick); // okay then just update on scroll/resize...
     _tickerUsed = false;
// }

Then it works fine.

Unfortunately as of 1.10 these lines don't seem to be there, so it's not possible to comment them out. It also is not clear to me what adverse effects to expect from this mod.

As far as I can tell the problem persists with Scrollmagic 2.0. This example is very clunky on IE (even on small window sizes):

http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html

Any input welcome!

Ben

[benos]

Did a bit more playing around. It seems that even in the absence of anything (no scrollmagic, no jquery etc), the requestAnimationframe rate of IE drops to about 250ms when the image is scrolled up and down.

Using onscroll, the rate is more in the 10-15ms range.

So I suppose the issue is primarily a browser one, though it does raise some questions about the fit-for -purposeness of RAF on IE.

Possibly it is related to my machine. IE reports hardware acceleration, but the Nvidia GPU seems to be off. This means that the Intel built-in chip is doing the work. (though Chrome doesn't have a problem keeping up, even with RAF).

[janpaepke]

Hi @benos
Sorry for the delayed answer, I was on holidays...

Thank you for your very thorough investigation. I wish all of them were as precise and structured.

Unfortunately I don't have a box handy (testing on VM) to get deeper into this.
If it is true what you're saying and RAF is dropping to 250ms you might be able to force update on scroll (kind of work around the debounce).
Something like this:

$(window).on("scroll", function() {
    controller.update(true);
});

let me know your findings...

[benos]

Hi Jan,

Thanks so much for your answer and the great library - I'm having a lot of fun with it.

I worked around it by hacking 1.3.x so that IE uses onScroll. It's kind of all duck taped, but it works.

I was surprised that not more people are raising this issue, so possibly it's down to the combination of a 4 year old machine, integrated graphics and IE, which might be unusual.

If you have a chance I think this is something you might want to check since the examples on your site also have the problem. I'll do the same if I can, but as you I am limited in my access to Windows machines.

Best,

Ben

[katquinto]

Hello @benos,

Is the issue you are referring to is the bouncing on IE? You mentioned you have a workaround for this. Would you mind sharing it so I can test it on our site?

Thanks in advance!

[benos]

@katquinto I've emailed you the file.

[janpaepke]

@benos I'd really like to zero in on this. could you contact me via email or skype?

[janpaepke]

On FF and IE possibly resolved in #255 (comment).
Issue remains in Safari.

Confirmations?

[janpaepke]

Consolidated into #288