Search jQuery

jQuery Forum

Simple parallax scroll effect problem in IE (codepen included)

in Using jQuery • 7 years ago

I have a problem with animating a div in IE.

As the user scrolls down, i want to move a div down aswell. The div is positioned absolutely with top property set to 5% and then in js file im adjusting the top property value based on the scrollTop value of window.

Everything works fine in other browsers but in IE, the animation is behaving strangely (seems like the animation fires only AFTER the window is scrolled, which makes it look bad and not smooth).

I tried using both jquery animate and css functions but the same effect occurs.

In this codepen fiddle i replicated the problem. Both methods are included(just comment/uncomment the one you want to see) http://codepen.io/bbpg/pen/bdJVGb

jqCaption.stop().animate({top: (5 + wScroll * 0.2) + '%'}, 0); or jqCaption.css({top: (5 + wScroll * 0.2) + '%'});

Thanks for any advice!

Replies(5)

jakecigar

Re: Simple parallax scroll effect problem in IE (codepen included)

7 years ago

It’s probably the percentage that causes the problem. When I simply remove the +"%" it goes smoothly (although to the wrong position).

Do the math and don’t use % for IE.

JΛ̊KE

bbpg

Re: Re: Simple parallax scroll effect problem in IE (codepen included)

7 years ago

Thanks for the reply,

I tried to use px units instead of % and the animation is now smooth ONLY when i scroll with the sidebar...

When I scroll with the mouse scroll, the flicker is still there :(

jakecigar

Re: Simple parallax scroll effect problem in IE (codepen included)

7 years ago

Update the code pen. I’d like to see what you came up with. I use a trackpad, so my scrolling may look different from yours.

JΛ̊KE

bbpg

Re: Re: Simple parallax scroll effect problem in IE (codepen included)

7 years ago

its updated, I just changed the starting top offset of the div to 70px (I didnt really need the percentages, since the containing div in my project has set height), and changed the js part a bit (tried both methods again)... http://codepen.io/bbpg/pen/bdJVGb

Yeah when scrolling with trackpad it works good, just when i use the mouse scroller it is a bit shaky (less than before so its definitely an impovement). I will consider adding smooth scrolling plugin to the site if I dont find a fix for this.

jakecigar