Html 视网膜屏幕上的铬渲染伪影

我一直在开发一个大型的单页应用程序，在此过程中，我遇到了一系列渲染工件，所有这些工件都是特定于chrome的。我的chrome版本是这篇文章中最新的：版本39.0.2171.95（64位）这两种情况都只发生在我的macbook pro视网膜显示器上，如果我将窗口部分或全部移动到另一个显示器上，显示器上的部分将不再显示伪影（在重新绘制chrome后）我知道这是一个第一世界的问题

我的直觉告诉我，如果我调整某个CSS属性或做一些稍微不同的事情，我可以避免这些问题，但我尝试过的一切都失败了。因此，我期待着stack社区的明智成员们聚集在一起，倾听我的故事：

第一个工件：简单隐藏显示以看似随机但高度可复制的方式很难成功

检查这三张图片，一张和另一张不一样

顶部的每个小图标隐藏或显示不同的div。它们都是等效的，只是显示不同数量的与流量相关的图标。只有当我第一次单击左一个时，中间一个将不会显示（一个包含所有汽车）。我认为这与拥有所有汽车的那辆车有一个滚动条这一事实有关。如果我进入ChromeInspector并喜欢检查或取消检查几乎所有关于它的属性，chrome会重新绘制它。同样，这一切都可以在不同的监视器上工作/实际上是在任何其他浏览器（包括ie8）上工作，因此它不是一些愚蠢的编码错误

第二个工件：当我滚动时，页面底部的固定div会被剪切并随页面移动

请注意，蓝色条被切断！蓝色条的CSS如下所示：

position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
border: 1px solid #777777;
background-color: #e5f1f8;
z-index: 15;

它甚至没有在html中有某种分隔符的地方被切掉。在剪切线处没有任何元素，附近唯一的元素是白框（白框中没有类似的填充或边距..实际上是在空间中随机剪切）

---

任何帮助都将不胜感激。当我们只需要演示视网膜屏幕时，这是一个巨大的痛苦

刚刚有其他人在使用视网膜显示器在Chrome上正确渲染元素时遇到问题：

在渲染页面元素时，视网膜显示器上的Chrome可能会出现一些渲染引擎问题。您可以通过查看最新版本的Opera中是否出现相同的问题来确认是否是引擎问题，因为它使用与Chrome相同的闪烁渲染引擎（Safari使用的Webkit与fork分开）

如果这是一个引擎问题，在谷歌发布解决方案之前，你可能会被限制在修复该问题的选项范围内。否则这里可能会有一个疯狂的天才可以解决这个问题

---

祝你好运：）

至于位置固定条，请尝试编辑css以达到此目的

position: fixed;
bottom: 0px;
width:100%; /* or whatever your width is */
height:50px; /* or whatever your height is */
border: 1px solid #777777;
background-color: #e5f1f8;
z-index: 15;

至于显示问题，如果它在其他webkit浏览器上正常工作，而这些浏览器通常表明浏览器本身存在问题，而您对此无能为力，除了可能为出现显示问题的屏幕大小制定规则，以不同的样式显示网站或应用程序，或者放大或缩小

---

无论如何，祝你的问题好运

不幸的是，你无法触摸或查看当前设置。这似乎不是一个你可以猜得到的问题。。我们将在黑暗中拍摄，无法掌握真正的答案。根据您在每个选项之间切换的方式，您可以单独提供2或3个不同的答案。这取决于该栏的显示方式以及它在页面上的位置，可以提供更多的功能。如果你能提供一个可复制的示例页面，那可能是你最好的选择。