Chrome渲染问题。固定式锚栓，主体带UL
使用以下代码的Google Chrome和Opera（为什么？=）存在渲染问题：
<html>
<style>
#content {
width: 150px;
background: gray;
}
#sidebar {
position: fixed;
left: 200px;
background: gray;
}
</style>
<body>
<div id="sidebar">
<a href="#s1">Link #1</a><br/>
<a href="#s2">Link #2</a>
</div>
<div id="content">
<div id="s1">
<a href="#s1">Link #1 TARGET</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="s2">
<a href="#s2">Link #2 TARGET</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
<a href="#">TOP</a>
</body>
</html>
如您所见，我正在尝试使右侧的边栏变为静态。一切正常，直到您<UL>在页面上添加一些标签
单击锚链接时，固定的div有时会开始消失。
如何避免这种行为？
问题答案：
Chrome解决方案：
为我增加-webkit-transform: translateZ(0)了#sidebar解决问题的方法。
这些年来，我曾经translateZ(0)修复过许多Chrome显示错误。理由是通过调用3D转换，重画与CSS痛苦堆栈的其余部分分开了（我无法提供更多细节，这对我来说几乎就是希腊文）。无论如何，它似乎对我有用！
#sidebar {
-webkit-transform: translateZ(0);
}
Opera解决方案：
这不是通用解决方案（将根据相关元素的定位要求进行调整）。它通过对可能影响布局的属性（通过CSS动画）强制进行连续重绘（通过CSS动画）（强制计算和渲染其他布局因子，即保持固定的位置）而起作用，但实际上不起作用。在这种情况下，我使用了margin-bottom，因为这不会影响您的页面布局（但是Opera并不知道！）：
@keyframes noop {
0% { margin-bottom: 0; }
100% { margin-bottom: 1em; }
}
#sidebar {
animation: noop 1s infinite;
}
注意：
解决方案不是完美的，因为（至少在我的机器上）bug测试用例会导致一分钟的闪烁，因为Opera失去定位并快速重绘。可悲的是，我认为这是您将得到的，因为正如George在他的回答中所说，这是Opera在重绘之间的自然行为-理论上，我的代码使元素的重绘是连续的，但实际上会存在无限的差距。
编辑2 （2013-11-05） ：
此后，我经常遇到此错误的变体。尽管原始发布者的简化测试用例呈现出完全合法的错误，但大多数情况是在人体上已经存在3D变换（或类似地位于DOM树上方）的情况下发生的。这通常用作强制GPU渲染的黑客手段，但实际上会导致类似这样的讨厌的重画问题。2种无操作3D转换并不正确：如果您在树的上方使用一棵树，请尝试先将其移除，然后再添加另一棵树。
编辑3 （情节中字） ： 克里斯报告说translateZ(0)不会在某些情况下工作scale3d(1,1,1)呢。
-
问题内容： 在过去的六个月中，我一直在与Backbone合作。前两个月很混乱，学习并弄清楚我要如何围绕它构建代码。接下来的4个月，该公司推出了适合生产的应用程序。不要误会我的意思，Backbone使我摆脱了以前标准的成千上万行客户端代码的混乱，但是它使我能够在更短的时间内完成更多宏伟的事情，从而带来了一系列全新的问题。对于我在这里提出的所有问题，有一些简单的解决方案，感觉像是骇客或只是 错误 。我
-
问题内容： 我已经有一段时间了，这似乎是一个Chrome重绘错误，尚未修复。因此，我正在寻找任何权宜之计。 主要问题是页面上的元素具有使用以下内容的背景图像时： 如果另一个元素固定并具有子视频元素，则它将导致具有背景图像的元素消失。 现在，它可以在Safari（以及Firefox和IE）中正常运行，因此这并不是Webkit的问题。我已经应用了一些没有用的建议属性。 目前，我的解决方案只是通过媒体查
-
我是android studio的新手，安装了一个新版本（1.5.1版）。出于某种原因，我一直收到一条错误消息（每次我使用应用程序主题时），说有渲染问题：缺少样式。我在网上寻找解决方案，但大多数都过时了，或者根本不起作用。 谢谢你的帮助。 清单文件： 构建渐变：
-
从昨天开始，我已经开始与Android Studio的工作。我的问题是当我做我的布局。我有下一个错误（观看屏幕截图了解更多信息）： 渲染问题：此版本的渲染库比您的Android Studio版本更新。请更新Android Studio 如果我检查更新，他会说我已经有了最新版本的Android studio，所以我无法更新。 我也在SDK管理器中安装了一些东西，请看下面的截图。 有人能帮我解决这个问
-
问题内容： 在chrome 47上（正确的行为）： 在chrome 47上，div 正确滚动，使用flex调整高度为100％。 在Firefox（错误的行为）上： 在Firefox上，与div一起使用的是内容高度，并且滚动不正确。 跨浏览器解决此问题的方法是什么？ 已更新问题， 以区分Chrome 47和Chrome 48。 问题答案： 更新了flexbox规范，使flex项目的默认最小大小等于内
-
我们刚刚将本地Android SDK更新到了新的22版，我们也在尝试更新我们的应用程序，但在Android Studio的布局设计视图中SearchView呈现似乎有一个问题：每当设计师试图呈现SearchView元素时，它都会抛出一个异常： java.lang.nullPointerException · 在Android.content.res.typedarray.hasValueOremp