子像素滚动问题,无法在 Chrome 69 上正确设置 scrollTop

dhi*_*ilt 5 javascript scroll google-chrome zooming scrolltop

我正在尝试以scrollTop编程方式设置某些 DOM 元素的属性,并且我有奇怪的行为会破坏我在某些特定环境中的测试。我创建了最小的复制(链接

HTML

<div id=viewport><div id=content></div></div>
Run Code Online (Sandbox Code Playgroud)

CSS

#viewport {
  overflow-y: auto;
  height: 20px;
}
#content {
  height: 150px;
}
Run Code Online (Sandbox Code Playgroud)

JS

const viewport = document.getElementById("viewport");
viewport.scrollTop = 75;
console.log(viewport.scrollTop);
Run Code Online (Sandbox Code Playgroud)

该脚本的结果在Win 10 Pro上运行的Chrome 69.0.3497.100上被破坏。它代替. 它可以在Mac上的相同Chrome版本上正常运行,甚至可以在 VirtualBox 下运行的Win 10 Home 上正常运行。FirefoxEdge也没有这样的问题。74.400001525878975

我知道它看起来很奇怪,但它会是什么?任何人都可以确认这个问题吗?能否以某种方式修复它以确保scrollTop分配的结果正是我想要的?


更新。感谢@khajjit,我能够在我的 Mac 机器上重现这个问题,并进行了74.6666641235351675% 的缩小和 150% 的放大。80% 给出了7590% -- 74.44444274902344110% --74.54545593261719等(我更新了演示以显示结果表)。所以这个问题与操作系统无关。但看起来只有 Chrome 的问题。Firefox 和 Edge 在任何规模下都返回 75。

更新 2。在操作系统层缩放屏幕分辨率也会影响这种情况。这就是上述 Win 10 Pro 的情况;它有 125% 的操作系统扩展。

所以问题的实际部分是如何克服 Chrome 缩放舍入问题以便能够scrollTop精确设置?


更新 3。Chromium Dev确认这是一个错误

这个问题是因为 Chrome 不完全支持分数滚动偏移。

因此,如果有人对此问题的解决感兴趣,请点击链接并在 Chromium 端为问题加注星标。