3

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

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

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

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

顶部的每个小图标隐藏或显示不同的 div。它们都是等价的，只是显示不同数量的与交通相关的图标。仅当我第一次单击左侧（一个包含所有汽车）时，中间的才会出现。我认为这与拥有所有汽车的那个有一个滚动条这一事实有关。如果我然后进入 chrome 检查器并喜欢检查或取消选中几乎所有关于它的属性，chrome 会重新绘制它就好了。同样，这一切都适用于不同的监视器/实际上任何其他浏览器（包括 ie8），所以它不是一些愚蠢的编码错误。

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

在此处输入图像描述

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

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

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

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

4

2 回答 2

0

至于位置固定栏尝试将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 浏览器上运行良好，这通常表明浏览器本身存在问题，您对此无能为力，除非为出现显示问题的屏幕尺寸制定规则，以不同的样式显示网站或应用程序，或者放大或缩小？

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

于 2015-01-19T19:18:58.873 回答
0

刚刚有人在 SO 上遇到问题，让元素在带有 Retina 显示器的 Chrome 上正确呈现：如何在视网膜显示器上删除这些元素之间的单个像素空间？

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

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

祝你好运:)

于 2015-01-16T06:02:25.687 回答