Retina屏幕上的Chrome渲染文物

Question

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

我的直觉告诉我，如果我调整某个CSS属性或略微不同，我可以避免这些问题，但我尝试过的所有内容都失败了。因此，我向你们展示了堆叠社区的聪明人，聚集在一起并听取了我的故事：

第一件神器：简单的隐藏展示以一种看似随机但高度可重复的方式难以实现。

检查这三张图片，一张不像另一张！

顶部的每个小图标隐藏或显示不同的div。他们都是等同的，只显示不同数量的交通相关图标。只有当我第一次点击左边的时才会显示中间的（一个包含所有车辆）。我认为这与所有汽车都有滚动条的事实有关。如果我然后进入镀铬检查员，并检查或取消检查几乎任何有关它的属性，铬重新粉刷它就好了。这一切都可以在不同的监视器/字面上任何其他浏览器（包括ie8）上工作，因此它不是一些愚蠢的编码错误。

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

请注意，蓝条会被切断！ CSS栏的CSS如下：

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

在html中存在某种分隔符的情况下，它甚至无法被切割。切割线上没有任何元素，唯一的附近元素是白色方框（并且没有像白色方框那样的填充或边距......它实际上是在空间中随机切割的）

任何帮助将不胜感激。当我们所有必须演示的是视网膜屏幕时，这是一个巨大的痛苦。

Answer 1

让其他人在SO上遇到问题，因为在使用Retina显示屏的Chrome上也能正确呈现元素：How can I remove the single pixel space between these elements on retina displays?

在渲染页面元素时，看起来Retina显示屏上的Chrome可能会出现一些渲染引擎问题。您可以通过查看Opera的最新版本是否出现相同问题来确认它是否是引擎问题，因为它使用与Chrome相同的Blink渲染引擎（Safari使用的Webkit单独分叉）。

如果是引擎问题，在Google发布修补程序之前，您可能会选择修复此问题。否则，这里可能有一个疯狂的天才可以解决这个问题。

祝你好运：）

Answer 2

至于位置固定栏尝试编辑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浏览器上工作正常，通常表明浏览器本身存在问题，除了可能对屏幕大小做出规则之外，你不能对它做任何事情。有显示问题，以不同的方式显示网站或应用程序或放大或缩小？

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