title: Item positioning on scroll gives a warning about asynchronous scrolling
body: <p>I'm trying to position two images by changing their top margin based on the scroll position.
  The margins have a max value as well.</p>
  
  <p>Everything works just fine but I have a warning on the console, saying that this solution can cause a jittery scrolling effect in browsers with asynchronous scrolling.</p>
  
  <p>My first question is, should I worry about this?
  Also, this is literally my first few lines of javascript and I'm not sure if this solution is good enough, so any advice is appreciated.
  It just looks so simple I feel like there is a catch.</p>
  
  <p>I could do it by adding classes to the images and set the margins in CSS, but it would be a lot longer code I guess.
  I'm trying to do this strictly with js and CSS grid, just to learn to solve problems with limited tools.</p>
  
  <p>The images are in a div, which is in a grid cell.</p>
  
  <pre><code>window.addEventListener("scroll", function () {
    myMargin = 0.011 * window.scrollY;
    if (myMargin &lt; 3.4) {   //max margin is 3.4% for myImg1
      myImg1.style.marginTop = animMargin + "%";
      myImg2.style.marginTop = animMargin / 2.7 + "%";  //myImg2 moves on a different scale
    } else {
      myImg1.style.marginTop = "3.4%";   //when the max value reached the margin is fixed
      myImg2.style.marginTop = "1.25%";
    }
  });
  </code></pre>