Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Non-jumping parallax with IE11 - but how?

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!

like image 800
Gnarlund Avatar asked Feb 03 '15 15:02

Gnarlund


1 Answers

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

like image 102
Drew Major Avatar answered Oct 06 '22 01:10

Drew Major