position:fixed 元素，鼠标移动时，导致该元素消失

chrome-fixed-disppear.md

html:

<div class="main"></div>
<div class="sidebar"></div>

css:

.main{
 width: 980px;
 height: 1600px;
 margin: 0 auto;
 background-color: green;
}
.sidebar{
 position: fixed;
 top:0;
 height: 200px;
 width: 200px;
 background-color: #ddd;
 left:50%;
}

基本就是这个结构和样式，当鼠标来回移动时，sidebar会消失(上面代码测试了，没有消失)。

解决方法，在position:fixed的元素上，添加:

-webkit-transform: translateZ(0);

or

html, body {height:100%;overflow:auto}

这个貌似是webkit内核的问题。

参考：

https://code.google.com/p/chromium/issues/detail?id=95338

https://code.google.com/p/chromium/issues/detail?id=52796

http://stackoverflow.com/questions/15152470/chrome-rendering-issue-fixed-position-anchor-with-ul-in-body

http://stackoverflow.com/questions/4980502/weird-webkit-issue-with-position-fixed

http://stackoverflow.com/questions/11258877/fixed-element-disappears-in-chrome

http://stackoverflow.com/questions/17602611/inspect-a-hover-element