iPhone + CSS3 多列 + 溢出 : Scroll = Bug?

Question

全部。我在尝试在 overflow: scroll 容器中实现 CSS3 多列时遇到了奇怪的行为。在 OS X 的 Chrome + Safari 上工作，在 iPhone 上中断:

<div id="rubber-banded">
  <div id="columns">
    <p>[...]</p>
    <p>[...]</p>
    [...]
  </div>
</div>

#rubber-banded {
  -webkit-overflow-scrolling: touch;
  overflow:scroll;
  margin-top:42px;
  width:100%;
  outline:2px solid red;
  height:300px;
}

#columns {
  margin-top:10px;
  -webkit-column-width:120px;
  height:250px;
  outline:2px solid blue;
}

这是预期的结果:

这是实际结果:

如您所见，文本溢出 #columns 直到新段落开始。然后，下一段从下一列开始，上面有一个空隙。这很奇怪，如果我在 #rubber-banded 上将 overflow:scroll; 更改为 overflow:hidden; 我会得到预期的结果——尽管，我没有得到我想要的橡皮筋效果 :(。我也尝试了 -webkit-column-break-after 的各种组合，但无济于事。

这是一个错误还是我做错了？

Answer 1

CSS 属性 overflow: scroll 每次在 iPhone 上有 scroll 浏览器为滚动添加了边距，因为它是针对触摸优化的浏览器。