Why will changing this CSS effect using JS only work smoothly for certain values?

I am trying to move an image slowly relative to the viewport when the user scrolls the page. Similar to the effects found here https://ihatetomatoes.net/demos/parallax-scroll-effect-part-2/

If the image is moved by a larger value then it moves smoothly. If it is moved by a small amount then it becomes very janky.

var imageOffset = lastScrollY * 0.9;
$image.css({top: `${imageOffset}px`});     //Runs badly

var imageOffset = lastScrollY * 0.3;
$image.css({top: `${imageOffset}px`});     //Runs well

Why does the value affect the performance so much?

I have tried all the different CSS styles (transform, top, bottom, background-position). Dev tools says that I am well in the time limit for 60fps. This happens if there is nothing but the image on the page and on multiple browsers and devices. This is also not just for images but for text or anything else as well.

Bad Version: https://jsfiddle.net/4vcg8mpk/13/

Good Version: https://jsfiddle.net/4vcg8mpk/15/

Problem most noticeable in Firefox, in Chrome it is noticeable on first scroll and then settles down. Also most noticeable using scroll wheel or trackpad instead of dragging side scroll bar

from Why will changing this CSS effect using JS only work smoothly for certain values?