css - 固定位置在 Safari 7 中不起作用

Question

我有一个固定位置的 div，它在我滚动时位于屏幕底部，不会移动。然而，在 Safari 上，这个 div 就像它是绝对定位的一样，并随着其余内容上下移动。当我单击“检查元素”时，编程的(期望的)位置会突出显示，而不是可视的(实际的？)位置。

我无法在 fiddle 中重现这个问题。这不会发生在 Chrome、FF 或 IE (10+) 中。

这是视觉(字符计数框)和编程位置(突出显示的区域)之间差异的屏幕截图。

在这些之上还有更多实际的 css 和 html 层，但这里是直接代码:

html 简化

<article class="parent">
  <article class="inner-wrapper">
    <div id="counter">
      Character Count: <span class="tally">*javascript calculation*</span>
    </div>
  </article>
</article>

scss

article.parent {
  max-width: rem(640);
  margin: 0 auto rem(30) auto;
  padding: 0 rem(10);

 #counter {
   position: fixed;
   border: #888 solid 1px;
   bottom: 130px;
   left: 10px;
   border-radius: 5px;
   padding: 10px;
   background: rgba(255, 255, 255, .8);
   font-size: .8em;
   min-width: 150px;
 }

如何让这个 div 在 Safari 中运行，以便视觉对象位于编程位置的顶部？

Answer 1

发现错误:

通过在父元素中包含这两个规则，我能够将错误追溯到我们使用的硬件加速“技巧”:

transform: translateZ(0)
perspective: 1000

通过删除这两条规则，该元素现在的行为符合预期。有关此问题的更多有用信息:CSS performance relative to translateZ(0)

额外的错误修复:在 HTML 正文中删除这些规则会导致我们的 PhantomJS/Poltergeist 测试出现各种元素重叠问题。显然 PhantomJS 本身并不能正确地移动元素。我们仅将这些规则用于测试，目前一切正常。

原始解决方案:

我能够通过从父容器中拉出计数器来解决这个问题:

<article class="parent">
  <article class="inner-wrapper">
    ...
  </article>
  <div id="counter">
    Character Count: <span class="tally">*javascript calculation*</span>
  </div>
</article>