javascript - "This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning"

Question

I have been given this unusual warning from Firefox. The positioning effect it refers to is a div I rotate as a factor of the scroll height. I have never had any problems with it, but is this something I should be concerned about? Is there anyway to have such effects without this warning? The JavaScript that demonstrates this issue is:

//Rotate gears in about section
$('.gear').css({
   'transition': 'transform 1s ease-out',
   '-webkit-transform': 'rotate(' + Math.round(wScroll / 2) + 'deg)',
   '-moz-transform': 'rotate(' + Math.round(wScroll / 2) + 'deg)',
   '-ms-transform': 'rotate(' + Math.round(wScroll / 2) + 'deg)',
   'transform': 'rotate(' + Math.round(wScroll / 2) + 'deg)',
});

• wScroll is the current scroll height

question from:https://stackoverflow.com/questions/37098306/this-site-appears-to-use-a-scroll-linked-positioning-effect-this-may-not-work

Answer 1

The warning, I think, goes on to say:

...see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

But in case that page is unclear, here's the gist of it.

The idea of "asynchronous panning" is this: when the page is scrolled, the browser calls your scroll handler, but it also asynchronously paints the page at the new scroll-point. This is done to make scrolling appear responsive (@ 60 FPS) even when the main thread is busy for more than 16ms.

This means that the effects your handler implements are not guaranteed to be in sync with the current scrolling position. I.e. the scrolling is smooth, but your divs rotate with a smaller FPS -- appearing janky, non-smooth. Update, missed the transition effect in your example -- the rotation itself will also be smooth, but it might start later than the page starts to scroll.

I don't think you can implement the exact effect you have with the currently available technologies without having this problem.

example

(Note that to see the APZ in action, you need to be running the Firefox version with it enabled. In particular this requires Firefox to be running in a multiprocess ("e10s") mode, which is still not in the release builds at this time.)

window.onscroll = function() {
  var wScroll = document.documentElement.scrollTop;
  document.getElementById("gear-css").style.transform = 'rotate(' + Math.round(wScroll / 2) + 'deg)';
  document.getElementById("gear-js") .style.transform = 'rotate(' + Math.round(wScroll / 2) + 'deg)';
  document.getElementById("gear-js").textContent = leftPad(wScroll+'', '0', 4);

  setTimeout(slowdown(500), 0);
};

function leftPad(s, ch, maxLen) { return ch.repeat(maxLen - s.length) + s; }
function slowdown(timeMs) {
  return function() {
    var start = Date.now();
    var j = "";
    for (var i = 0; (Date.now() - start < timeMs); i++)
      j = j+(start+"")*i;
  }
}


window.onload = function() {
  for (let i = 0; i < 15; i++) {
    var p = document.createElement("p");
    p.innerText = `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
    document.documentElement.appendChild(p);
  }
}

#gear-css, #gear-js {
  border: solid black 1px;
}
#gear-css {
  transition: transform 1s ease-out
}

<div style="position: fixed; top: 0; right: 0; padding: 3em;">
  <div id="gear-css">ooo</div>
  <div id="gear-js">ooo</div>
</div>