search

janpaepke / ScrollMagic

The javascript library for magical scroll interactions.
http://ScrollMagic.io
Other
14.9k stars 2.17k forks source link

Parallax performance on IE #253

Closed benos closed 9 years ago

benos commented 9 years ago

Hi,

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

Test machine

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

@katquinto I've emailed you the file.

janpaepke commented 9 years ago

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

janpaepke commented 9 years ago

On FF and IE possibly resolved in https://github.com/janpaepke/ScrollMagic/issues/255#issuecomment-82322149. Issue remains in Safari.

Confirmations?

janpaepke commented 9 years ago

Consolidated into https://github.com/janpaepke/ScrollMagic/issues/288