使用CSS“剪辑”的Safari渲染错误(Safari rendering bug with CSS “clip”)

 Safari有以下问题： http : //cl.ly/ZlJ8 
 
 LiveDemo： http ://drpdev.de/labs/example.html 
 
 完整的源代码： http : //jsfiddle.net/uqsghon7/ 
 
<div class="row">
  <div class="rowcontainer">
    <div class="side">
      ...
    </div>
  </div>
</div>
... (multiple times with different contents in .side)
 
 和风格： 
 
.side {
  height: auto;
  padding-left: 50px;
  margin: auto;
  position: fixed;
  top: 50%; left: 0; bottom: 0;
  width: 350px;
  ...
}
.row {
  ...
  position: relative;
  overflow: hidden;
}
.rowcontainer {
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  clip: rect(0, auto, auto, 0);
  overflow:hidden;
}
 
 它适用于Chrome和Firefox。 在我试图实现它只有位置固定在（相对定位）div（没有第二个容器）和溢出隐藏，它在所有的浏览器，但不是Firefox的，所以我必须做这个解决方法与CSS剪辑...它实际上也可以在Safari浏览器中运行，但似乎Safari的渲染引擎在滚动时不会刷新视图... 
 
 有任何想法吗？ 

I have the following issue with Safari: http://cl.ly/ZlJ8
 
LiveDemo: http://drpdev.de/labs/example.html
 
full source code: http://jsfiddle.net/uqsghon7/
 
<div class="row">
  <div class="rowcontainer">
    <div class="side">
      ...
    </div>
  </div>
</div>
... (multiple times with different contents in .side)
 
and style:
 
.side {
  height: auto;
  padding-left: 50px;
  margin: auto;
  position: fixed;
  top: 50%; left: 0; bottom: 0;
  width: 350px;
  ...
}
.row {
  ...
  position: relative;
  overflow: hidden;
}
.rowcontainer {
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  clip: rect(0, auto, auto, 0);
  overflow:hidden;
}
 
It works perfectly in Chrome and Firefox. Before I tried to achieve it only with position fixed inside the (relative positioned) div (without second container) and overflow hidden and it worked in all browser but not Firefox, so I had to do this workaround with css-clip... It actually works in Safari as well but it seems like Safari's render engine is not refreshing the view when scrolling...
 
Any ideas?

原文：https://stackoverflow.com/questions/28488059