Fixed position not working in Safari 7

问题:

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?

回答1:

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>

回答2:

Try this fiddle

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

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

you need this css style