Jerky on scroll in IE, Edge & some ios

[davydkoff]

Its because use position: fixed on image. Translate3D works fine, but fixed positioning do Jarallax jerky or slows. If i change position - works very cool, but wrong calculate position image when scroll. Could you change position: fixed on image and fix the code to make it work?

Thank you!

[BackuPs]

Hi Davy,

Just try and do NOT remove the default user background image in the timer function for any IE browser was the solution for me. Try attached files. It should fix at least most of the choppyness. It did work fine for me.

Note do a hard refresh in your browser to load the new scripts. !

jarallax-modded-for-ie-v172.zip

Let me know if that works for you

Best regards,
BackuPs

[BackuPs]

Note: i reuploaded the zip file in my first reply to you and applied the fix only to the timer function. Its working fine now in my install. In case you already downloaded the zip please redownload again. Sorry for the inconvenience.

ps. i renamed the files (on purpose) to jquery.jarallax.js so you still have the original ones :-)

[davydkoff]

Let me know if that works for you

Hello! Thanks for your answer, but your fixed js not work on Edge & IE... Maybe i do wrong something? Just use your jquery.jarallax.js... In Opera, Chrome works fine, but in Edge & IE images still.

[BackuPs]

Hi Davyd,

Can you add a url so i can see your jerky issue on ie and edge?

[davydkoff]

Can you add a url so i can see your jerky issue on ie and edge?

http://new.mixfmradio.ru/y3/test.htm

If i change position: fixed to relative in "jarallax.js" on line 587, no slows... but wrong positon calculate...

http://new.mixfmradio.ru/y3/test2.htm

[BackuPs]

i see you are still using jarallax.js..

change this code in that script and try again for y3/test.htm

// timeout to fix IE blinking setTimeout(function () { if(_this.$item) { // remove default user background _this.css(_this.$item, { 'background-image' : 'none', 'background-attachment' : 'scroll', 'background-size' : 'auto' }); } }, 0);

to this

// timeout to fix IE blinking setTimeout(function () { if(_this.$item) { // remove default user background if(!isIElt10 && !isIE11 && !isIE10 && !isEdge ) { _this.css(_this.$item, { 'background-image' : 'none', 'background-attachment' : 'scroll', 'background-size' : 'auto' }); } } }, 0);

[davydkoff]

i see you are still using jarallax.js

Yes, because your code don't work on IE and Edge

[davydkoff]

Now i use your "jquery.jarallax.js"
http://new.mixfmradio.ru/y3/test3.htm

[davydkoff]

If you are mind to off jarallax on IE & Edge, thats work, but i requested change position: fixed to another & fix the code to make it work on IE & Edge faster :)

[BackuPs]

Its not working because you forgot to set a z-index to the footer_bg

add z-index:0;

.header_bg, .footer_bg {
background-position: 50% 0;
background-image: url('../images/triangles_bgOLD.png');
position: relative;
z-index:0;
}

[davydkoff]

http://new.mixfmradio.ru/y3/test3.htm
Unfortunately, strobe effect remained, though smaller

[BackuPs]

I have no further solution for you..... unfortunately.

[nk-o]

We tested all variations and the best for performance - is fixed position. You can make parallax on IE using background-position - just set enableTransform option to false on IE https://github.com/nk-o/jarallax#options

[BackuPs]

I am sorry but the script should do this automatically on IE as it is really a problem on IE as described by davidkoff. If one sets enable transform to false by default it is disabled on all browsers. This is not a good solution.

[nk-o]

@BackuPs as I told, we tested it and for us on IE Jarallax working better with transformations and with fixed position. If for you - not, you can try to disable transformations. There is no necessary to disable it on all browsers, you can make it only for IE.

var isIE = /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent) || /MSIE 10/i.test(navigator.userAgent) || /Edge\/\d+/.test(navigator.userAgent);
$('.jarallax').jarallax({
    enableTransform: !isIE
});

[renet]

@nk-o Would you please consider updating the demo site with this? Probably the easiest way to see how it works. Thank you! :)

[nk-o]

@renet with this? Updated jarallax script to the latest version on the demo. For demo site used files from this directory https://github.com/nk-o/jarallax/tree/master/demo

[renet]

@nk-o I meant with enableTransform set to false in case of IE. Shouldn't that eventually even be added to the core?

[nk-o]

@renet this option was removed since v1.8.0. Parallax always uses transformations.