视网膜像素密度和CSS溢出-y

Question

免责声明：这个问题冗长而复杂，我不确定是否有快速回答，但我在我的最后和同事的知识而且我们已经空了，加上这就是StackOverflow似乎喜欢的东西。

问题

我有一个使用jQuery Mobile为前端UI构建的遗留应用程序。仅在高dpi断点上存在问题，其中具有overflow-y: auto;并且不需要溢出的div（内容不会超出容器的末尾）将呈现为空白。

在standard-dpi断点上查看同一容器不会产生相同的结果。

如果我将CSS规则更改为overflow-y: visible;或overflow-y: hidden;，则问题不会发生，但如果容器 ，则滚动功能无法正常运行溢出。

请参阅以下屏幕截图：

标准DPI断点，内容显示正确。

高DPI断点，内容未显示

我知道这是一个渲染问题（而不是CSS版本），因为我可以通过调整窗口大小来强制屏幕重绘，内容会立即显示。所以我们的客户可以解决这个问题，但这很麻烦。

后续步骤

我想知道是否有办法迫使高dpi屏幕以标准DPI渲染，因为这可能是解决此问题的最快方法。否则，我可以追求什么方法来解决这个回归？我可能会补充一点，这个问题只出现在Chrome的最新版本中，我认为大概是39。

Answer 1

我们能够通过强制GPU渲染来解决渲染问题。将规则transform: translate3d(0,0,0);添加到选择器工作！

Answer 2

转换：translate3d（0,0,0）在我们的案例中没有用。与您描述的完全相同的问题。 但设置溢出：隐藏;在外部封闭元素确实解决了我们的问题。