Issue with scrolling a relatively positioned element

Hey I have this issue with using javascript to move a relatively positioned element. What I’m trying to achieve is a parallax-like effect where an element moves with the scroll but faster than a scroll. What I get is a choppy flow on some browsers / computers. I assume it should be solvable with better optimisation, but really don’t have an idea hot to do it.

Here is the codepen link -
And here is the behaviour observed by me -

Oh, and the element has to be position: relative (needs to obey the overflow: hidden), using fixed solves this issue but creates other so this is a no-go.

Cheers for help.

I’m guessing with “other browsers” you mean IE11\Edge, right? It’s a very well known issue with those. IE uses an internal smooth scrolling that causes the “jittering” in those type of transitions.

The only way to solve it via CSS that I know of is this one:

html, body { height:100%; }
html { overflow:hidden; }
body { overflow:auto; }

Then you would have to adjust your values for the animation, of course. If you do a google search, you’ll find plenty of topics relative to this issue.