使用溢出时重绘滚动：auto和border-radius

Question

在元素上使用overflow：auto时，我注意到性能问题。我尝试过translateZ（0）和backface-visibility：hidden但是没有解决问题。

<div id="testA">
  <ul>
    <li>...</li>
  </ul>
</div>

CSS：

div {
  width: 12em;
  background: #c6c6c6;
  padding: 0.5em;
  float: left;
  margin-right: 1em;
}

ul {
  margin: 0;
}

#testA ul {
  border-radius: 6px;
  background: #f6f6f6;
  height: 6em;
  overflow: auto;
}

Answer 1

问题实际上是由border-radius引起的。溢出：自动或溢出：滚动一个具有border-radius的元素会导致绘画风暴并在滚动时重新绘制。

建议完全从这些元素中删除border-radius。

演示：http://codepen.io/kevinfarrugia/pen/KgAYyE

CSS：

#testB .container {
  border-radius: 6px;
  background: #f6f6f6;
  display: inline-block;
  padding: 0;
}

#testB ul {
  height: 6em;
  overflow: auto;  
}