视网膜像素密度和 CSS overflow-y
Retina pixel density and CSS overflow-y
免责声明：这个问题又长又复杂，我不确定是否有快速的答案，但我和我的同事们的知识已经用完了，我们空空如也，加上 Whosebug 似乎喜欢这种东西。
问题
我有一个遗留应用程序是使用 jQuery Mobile 构建的前端 UI。仅在高 dpi 断点上存在问题，其中 div 具有 overflow-y: auto; 并且不需要溢出（内容不超出容器末尾）将呈现为空白。
在标准 dpi 断点上查看相同的容器不会产生相同的结果。
如果我将 CSS 规则更改为 overflow-y: visible; 或 overflow-y: hidden; 那么问题就不会发生，但是如果容器 是否溢出。
见下方截图：
标准 DPI 断点，内容正确显示。
高DPI断点，内容不显示
我知道这是一个渲染问题（而不是 CSS 问题），因为我可以通过调整 window 的大小来强制重绘屏幕，并且内容会立即显示出来。所以我们的客户可以绕过这个问题，但是很麻烦。
后续步骤
我想知道是否有办法强制高 dpi 屏幕以标准 DPI 呈现，因为这可能是解决此问题的最快方法。否则，我可以采取什么方法来解决这种倒退问题？我可能会补充说，这个问题只出现在 Chrome 的最新版本中，我认为大约是 39.
我们能够通过强制 GPU 渲染来解决渲染问题。将规则 transform: translate3d(0,0,0); 添加到选择器有效！
transform: translate3d(0,0,0) 在我们的案例中不起作用。与您描述的问题完全相同。
但是设置溢出：隐藏；在外部封闭元素上确实解决了我们案例中的问题。
免责声明：这个问题又长又复杂，我不确定是否有快速的答案，但我和我的同事们的知识已经用完了，我们空空如也，加上 Whosebug 似乎喜欢这种东西。
问题
我有一个遗留应用程序是使用 jQuery Mobile 构建的前端 UI。仅在高 dpi 断点上存在问题，其中 div 具有 overflow-y: auto; 并且不需要溢出（内容不超出容器末尾）将呈现为空白。
在标准 dpi 断点上查看相同的容器不会产生相同的结果。
如果我将 CSS 规则更改为 overflow-y: visible; 或 overflow-y: hidden; 那么问题就不会发生，但是如果容器 是否溢出。
见下方截图：
我知道这是一个渲染问题（而不是 CSS 问题），因为我可以通过调整 window 的大小来强制重绘屏幕，并且内容会立即显示出来。所以我们的客户可以绕过这个问题，但是很麻烦。
后续步骤
我想知道是否有办法强制高 dpi 屏幕以标准 DPI 呈现，因为这可能是解决此问题的最快方法。否则，我可以采取什么方法来解决这种倒退问题？我可能会补充说，这个问题只出现在 Chrome 的最新版本中，我认为大约是 39.
我们能够通过强制 GPU 渲染来解决渲染问题。将规则 transform: translate3d(0,0,0); 添加到选择器有效！
transform: translate3d(0,0,0) 在我们的案例中不起作用。与您描述的问题完全相同。 但是设置溢出：隐藏；在外部封闭元素上确实解决了我们案例中的问题。