sun*_*say 56 html css rendering google-chrome
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>在页面上添加一些标记:
http://www.youtube.com/watch?v=zkhH6di2M0c
当我点击锚链接时,固定的div有时会开始消失.
可以做些什么来避免这种行为？
Bar*_*ney 169
添加-webkit-transform: translateZ(0)到#sidebar固定的问题,对我来说.
translateZ(0)多年来,我习惯于修复许多Chrome显示错误.理由是通过调用3D转换,重新绘制与CSS痛苦堆栈的其余部分分开(我不能提供更多的细节,它几乎都是希腊语).无论如何,它似乎对我有用!
#sidebar {
-webkit-transform: translateZ(0);
}
这不是通用的解决方案(需要根据相关元素的定位要求进行调整).它的工作原理是强制连续重绘(通过CSS动画)在可能影响布局的属性上(强制计算和渲染其他布局因子,即保持固定定位),但实际上并非如此.在这种情况下,我已经习惯了margin-bottom,因为没有办法影响你的页面布局(但Opera不知道!):
@keyframes noop {
0% { margin-bottom: 0; }
100% { margin-bottom: 1em; }
}
#sidebar {
animation: noop 1s infinite;
}
注意:解决方案并不完美,因为(至少在我的机器上),当Opera失去定位并快速重绘时,错误测试案例将导致一分钟闪烁.可悲的是,我认为这一点和你能得到的一样好,因为正如乔治在他的回答中所说,这是Opera在重绘之间的自然行为 - 理论上我的代码会重新绘制元素的重绘,但实际上会有无穷小的差距.
编辑2(2013-11-05):我经常遇到这个bug的变种.虽然原始海报的简化测试用例提供了一个完全合法的错误,但大多数情况都发生在已经在身体上进行3D变换的情况下(或者类似于DOM树的高位).这通常被用作强制GPU渲染的黑客攻击,但实际上会导致像这样令人讨厌的重绘问题.2无操作3D变换不合适:如果您在树上使用较高的树,请先尝试将其删除,然后再添加另一个树.
编辑3(2014-12-19): 克里斯 报告说translateZ(0)在某些情况下scale3d(1,1,1)不起作用.
Cor*_*liu 15
Chrome的关键是:
html, body {height:100%;overflow:auto}
通过添加这个,固定位置问题应该是固定的.
| 归档时间： |
|
| 查看次数： |
39455 次 |
| 最近记录： |