When I set element.scrollLeft while the devicePixelRatio is 1.25 (on Windows > Display > Scale = 125%), Chrome seems to round my values to what appear to be multiples of 0.8. Firefox does not exhibit the same behavior.

Here is an example script:

element.scrollLeft = 1;
console.log(element.scrollLeft); // 0.8
element.scrollLeft = 2;
console.log(element.scrollLeft); // 2.4
element.scrollLeft = 3;
console.log(element.scrollLeft); // 3.2
element.scrollLeft = 4;
console.log(element.scrollLeft); // 4

This rounding is causing me issues in some code I am developing. The goal is to maintain the visual position of something in a scrolled container while that container is moving. For example, if the box moves 10 pixels to the right on the screen, scroll it the same amount, so that the contents look like they haven’t moved. Kind of like looking out of a window.

The code works well at a devicePixelRatio of 1 or 2, but not at 1.25. The rounding causes the element’s position to jitter back-and-forth a fraction of a pixel.

I know that sub-pixel precision is expected in Element.scrollLeft, as part of the spec. I would like to know how to to account for it in some way, so that I can set the scrollLeft and know that it is maintaining my contents’ position.

GIF: https://imgur.com/a/UYE2KsH

Here is a CodeSandbox with a demo of the technique: https://codesandbox.io/p/sandbox/hardcore-lichterman-xydrpy