固定位置在Safari 7中不起作用 [英] Fixed position not working in Safari 7

问题描述

我有一个固定位置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中起作用，以使视觉效果位于编程位置的顶部?

解决方案

发现错误:

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

transform: translateZ(0)
perspective: 1000

通过删除这两个规则，该元素现在表现出预期的效果.有关此问题的更多详细信息，请参见:相对于translateZ(0)的CSS性能

Bonus错误修复:在我们的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>

I have a fixed position div that sits at the bottom of the screen as I scroll, not moving. However, on Safari, this div acts like it is absolutely positioned, and moves up and down with the rest of the content. When I click "Inspect Element", the programmed (desired) location is highlighted, not the visual (actual?) location.

I am unable to recreate this issue in a fiddle. This is not happening in Chrome, FF, or IE (10+).

Here's a screenshot of the difference between the visual (the character count box) and the programmed location (the highlighted area).

There are more actual layers of css and html on top of these, but here's the immediate code:

html simplified

<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;
 }

}

How can I make this div behave in Safari, so that the visual sits on top of the programmed location?

解决方案

BUG FOUND:

I was able to trace the bug to a hardware-acceleration "trick" we were using by including these two rules in a parent element:

transform: translateZ(0)
perspective: 1000

By removing these two rules, the element now behaves as expected. More good information about this issue here: CSS performance relative to translateZ(0)

Bonus Bug Fix: Removing these rules in the HTML body caused various element-overlap problems in our PhantomJS/Poltergeist tests. Apparently PhantomJS doesn't move elements properly on its own. We included these rules only for the tests and currently everything is running fine.

ORIGINAL SOLUTION:

I was able to fix this problem by pulling the counter from the parent container:

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

这篇关于固定位置在Safari 7中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！