嵌套位置：固定剪切溢出：auto，但仅限于Mac上的Webkit

Question

我有两个DIV，主要和标题。两者都是position: fixed。标题的顶部将其置于主DIV的上方（在负顶部边缘），其具有overflow: auto以允许滚动。在我测试的所有现代桌面浏览器上都可以看到标题，除了Mac上的Chrome和Safari，它被裁剪（隐藏）。

这似乎是一个错误，但我不明白为什么它只会影响OS X上基于Webkit的浏览器。

这是代码......

HTML：

<div id="main">
  <div id="header">Partially clipped in Chrome and Safari on Mac.</div>
  Main content goes here.<br/>
  Main content goes here.<br/>
  ...
</div>

CSS：

  #main {
    position: fixed;
    top: 50px;
    height: 100px;
    overflow: auto;
  }
  #header {
    position: fixed;
    top: 42px;
  }

Live example here.

我发现了一些关于使用-webkit-transform: translateZ(0)的类似报告和建议。有趣的是，这并没有解决它，但确实会在Windows上发生错误。 Example here.

有什么想法吗？