亚像素滚动问题，无法在Chrome 69上正确设置scrollTop [英] Subpixel scroll issue, can't set scrollTop properly on Chrome 69

问题描述

我正在尝试以编程方式设置某些DOM元素的scrollTop属性，但是我的行为很奇怪，无法在某些特定环境下进行测试.我创建了最小的副本(链接)

I'm trying to set scrollTop property of some DOM element programmatically and I have weird behaviour that breaks my tests in some specific environment. I created minimal repro (the link)

HTML

<div id=viewport><div id=content></div></div>

CSS

#viewport {
  overflow-y: auto;
  height: 20px;
}
#content {
  height: 150px;
}

JS

const viewport = document.getElementById("viewport");
viewport.scrollTop = 75;
console.log(viewport.scrollTop);

在 Win 10 Pro 上运行的 Chrome 69.0.3497.100 上，脚本的结果已损坏.它是74.4000015258789而不是75.它可以在 Mac 上的同一 Chrome 版本上正常运行，甚至可以在VirtualBox下运行的 Win 10 Home上正常运行. Firefox 和 Edge 也没有此类问题.

The result of the script is broken on Chrome 69.0.3497.100 running on Win 10 Pro. It is 74.4000015258789 instead of 75. It works properly on the same Chrome version on Mac and even on Win 10 Home running under VirtualBox. Firefox and Edge also have no such an issue.

我知道它看起来很奇怪，但是可能是什么呢?谁能确认这个问题?并可以通过某种方式将其固定以确保scrollTop分配的结果恰好是我想要的吗?

I know it looks very strange, but what could it be? Can anyone confirm this problem? And could it be fixed in some way to make sure that the result of the scrollTop assignment is exactly I want it to be?

更新.多亏@khajjit，我得以在Mac机器上重现该问题，并使74.66666412353516缩小了75％，放大了150％.80％给出了75，90％-74.44444274902344，110％- -74.54545593261719等(我更新了该演示以显示结果表).因此，该问题与操作系统无关.但看起来只有Chrome才有问题. Firefox和Edge的任何比例返回75.

Update. Thanks to @khajjit, I was able to reproduce the issue on my Mac machine and got 74.66666412353516 on 75% zoom out and 150% zoom in. 80% gives 75, 90% -- 74.44444274902344, 110% -- 74.54545593261719 etc (I updated the demo to show the results table). So the issue does not relate to OS. But it looks like the Chrome only issue. Firefox and Edge return 75 at any scale.

更新2 .在OS层缩放屏幕分辨率也会影响这种情况.上面描述的Win 10 Pro就是这种情况；它具有125％的操作系统扩展率.

Update 2. Scaling the screen resolution at the OS layer also affects the situation. That was the case of Win 10 Pro described above; it had 125% OS scaling.

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

So the practical part of the question is how to overcome Chrome scaling rounding issues to be able to set scrollTop precisely?

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

Update 3. Chromium Dev confirmed that this is a bug:

此问题是因为Chrome浏览器不完全支持小数滚动 偏移量.

This issue is because Chrome does not fully support fractional scroll offset.

因此，如果有人对解决此问题感兴趣，请遵循链接，并在Chromium端为问题加注星标.

So if someone is interested in this problem resolving, please follow the link and star the issue on the Chromium end.

推荐答案

我认为这可能与显示器的分辨率有关.
我的分辨率为1920x1080，缩放比例为100％，结果是75.
但是，如果您设置75％或150％，则结果将是74.66666412353516.
或说25％，结果将恰好是74.

I think it might be related to the resolution of the monitor.
I have a resolution of 1920x1080 and with a scale of 100% the result is 75.
But if you set 75% or 150%, the result will be 74.66666412353516.
Or say 25%, the result will be exactly 74.

关于它可能与之相关的内容，我没有确切的答案，但我认为这项小小的研究可能会找到正确的道路.

I don't have any exact answer as to what it might be related to, but I think this little research might lead to the right path.

这篇关于亚像素滚动问题，无法在Chrome 69上正确设置scrollTop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！