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

Question

我有一个固定的位置div，当我滚动而不是移动时，它位于屏幕的底部。但是，在Safari上，这个div的行为就像绝对定位一样，并且与其他内容一起上下移动。当我点击“检查元素”时，编程的（所需）位置会突出显示，而不是视觉（实际？）位置。

我无法在小提琴中重现这个问题。这不会发生在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

找到BUG：

我能够将错误跟踪到硬件加速＆＃34;技巧＆＃34;我们通过在父元素中包含这两个规则来使用：

transform: translateZ(0)
perspective: 1000

通过删除这两个规则，元素现在可以按预期运行。有关此问题的更多信息，请访问：CSS performance relative to translateZ(0)

Bonus Bug修复：在我们的PhantomJS / Poltergeist测试中，在HTML正文中删除这些规则会导致各种元素重叠问题。显然PhantomJS并没有自己正确地移动元素。我们仅将这些规则包含在测试中，目前一切正常。

原始解决方案：

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

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

Answer 2

试试这个小提琴

http://jsfiddle.net/sosypjLg/1/

#counter {
position: fixed;
bottom: 0;
width: 100%;
}

你需要这种css风格