Non-jumping parallax with IE11 - but how?

Question

On my website, I experience - and a lot of others do on theirs - a kind of jumping/lagging effect with Internet Explorer 11 (on a Windows 8.1 machine) when creating a parallax. On Firefox for example it is working absolutely fine.

According to my research, this is a common problem with IE11 that has no solution, but I have found a website that somehow fixed the issue (or made a Workaround?!?) : http://focuslabllc.com/journal

But my website has the same issue as this one: http://negativespacealphabet.com/ What are they doing differently to get it work? I appreciate your help!

Dubbing

Maybe this helps you? github.com/Prinzhorn/skrollr – Pinkiepinkish

Example: pixeljuice.ru/en (scroll) – Pinkiepinkish

Read the source; they are using jQuery Waypoints with ScrollTo. – Standford

There is no parallax effect on the first site, just some elements that have fixed positioning. The second site could be mimicked using CSS clip, something like this: codepen.io/anon/pen/pgGlu – Hyphenate

^ to clarify I interpret 'parallax' as moving layers to give the appearance of distance rather than a combination of scrollable/static content. – Hyphenate

Answer 1

Best solution I have seen to this issue is to use transition on whatever properties you are using to create the parallax.

Example, you use transform:translateY to create a parralax effect, then add:

transition:transform 10ms linear

This forces the parralax to animate smoothly. Downside, its not fully backward compatible with older browsers

Midas

Thanks a lot Drew! – Dubbing