Known issue: IE - parallax and pin jitters

[janpaepke]

Parallax

Description: There are some parallax performance issues for Internet Explorer. Can be reproduced on http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_sections.html The background parallax effect seems "shaky" and "jittery". Analysis: Our research indicates, that this occurs due to excessive repaints (IE repaints the whole viewport) even if transforms are used (which shouldn't trigger viewport repaints). If this is true, there might not be a solution for this other than hoping MS will develop a better browser.

Pins (Sticky Elements)

Description: Some users report shaky or juggy behavior when using pinned elements. Analysis: We're still looking into in what conditions exactly this occurs. If you are able to provide demos or information, please do.

How can you help?

If you have demos in which these phenomenons can be successfully reproduced please provide them. If you have demos where this functionality works as you'd expect it, please provide links to them. If you are able to dig into the source code and make concrete suggestions to fix this, you are more than welcome to.

[andrew-dixon]

We are seeing the same issue with a site we have done using ScrollMagic.

[janpaepke]

Please check this link and let me know if this helps in any way: https://coderwall.com/p/hlqqia/ie-fix-for-jumpy-fixed-bacground

[georgebroom]

The link above fixed the issue for me, thanks @janpaepke

[janpaepke]

Good to know! I'll consider incorporating it into a fix for the next update of ScrollMagic.

[nelsonvassalo]

Hey @janpaepke Seems to work great for IE 11, but appears to be back in Edge, and doesn't work as well in IE10- in my experience

[dbusck]

Also having trouble with pinned element jumping up and down when scrolling (Edge)

[felipeccastro]

I was having this problem with a parallax site on IE; in fact, even the example parallax demo was jumpy in IE 10. Adding background-attachment: fixed to the background images worked perfectly, but I have to added it just for IE, because it breaks on other browsers.

[sitoexpress]

Did somebody solve this issue? I've built a simple parallax effect (using img as src and not as background, as I'd like them to be alt-texted and Indexed) and I have the same problem: images are jittering and jumping each time i move the mousewheel, just like the example parallax demo posted by @felipeccastro. The solution for me was just to disable the parallax effect for MSIE, Trident and Edge userAgents... not exactly the best. Everything fine with FF & Chrome, did not try opera yet.

[seleckis]

Here is a workaround what works for me:

First, set styles for html and body:

html {
    height: 100%;
}
html.ieedge{
    overflow: hidden;
}
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
}

Then set body as a container for IE in options of ScrollMagic.Controller:

var isIE = /*@cc_on!@*/false || !!document.documentMode;
var isEdge = !isIE && !!window.StyleMedia;
if (isIE || isEdge) {
    document.documentElement.className += " ieedge";
}
var container = (isIE || isEdge) ? document.body : window;
var controller = new ScrollMagic.Controller({   container: container });
// here goes scrollmagic usage

Explanation: position fixed works fine in IE11 and Edge only if body is used as a scrolling container, not html (window object). This code realizes that, but excludes other browsers.

There are two issues in IE/Edge when using this solution: 1) fixed elements overlays body's scrollbars 2) gsap scrollTo plugin works incorrect

[zurnet]

Tried the above solutions, still having issues on this site in both IE11 and EDGE... works fine in Safari, Firefox, Chrome etc.

[snaetilux]

Hello, I have the exact same problem with the Twenty Seventeen wordpress theme. Where do I write these lines (I'm a newbie in Wordpress). Thanks

[jeffceriello]

Hi, I have the jittery pinned elements issue in Edge, IE, here is a pen https://codepen.io/jeffceriello/full/JBqrLR/. Is there now a fix for this?

[LarsFinley]

janpaepke 's fix worked for me

[grayayer]

The IE fix doesn't work for me, because I'm experiencing the issue not within IE, but on mobile.

I have found that on desktop my site http://moda.studiok40.com/ which makes extensive use of pinning and greensock, there is no jitter on all browsers on Mac, but if you have the body & html set to overflow: hidden;, then there is a jitter on tablets & mobile devices. Without this overflow-hidden, pinning on mobile is unreliable and jumpy because an upwards scroll on the iPad triggers the address bar to change height causing jumping behaviour of position: fixed; elements.

This is a known bug referenced here: https://github.com/janpaepke/ScrollMagic/issues/256#issuecomment-91181647 and one way around this would be to find another way to keep the mobile browser address bars fixed in place rather than hiding on scrolling down.

[guitarbeard]

My unique issue with Edge involved an element that was fixed position outside and on top of a pinned section that caused the jittering. Placing the fixed element inside the pinned section seemed to get rid of the jittering for me.