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!

Read the source; they are using [jQuery Waypoints](https://github.com/imakewebthings/jquery-waypoints) with [ScrollTo](http://demos.flesler.com/jquery/scrollTo/). — Evan Davis, Feb 03 '15 at 15:55
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: http://codepen.io/anon/pen/pgGlu — i_like_robots, Jun 09 '15 at 12:43
^ to clarify I interpret 'parallax' as moving layers to give the appearance of distance rather than a combination of scrollable/static content. — i_like_robots, Jun 09 '15 at 12:47

score 3 · Accepted Answer · answered Apr 05 '16 at 14:04

3

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

answered Apr 05 '16 at 14:04

Drew Major

501
1
3
18

1

Thanks a lot Drew! – Gnarlund Jan 14 '17 at 16:18

Non-jumping parallax with IE11 - but how?

1 Answers1