Fixed position not working in Safari 7

Question

I have a fixed div position that sits at the bottom of the screen when I scroll, not move. However, in Safari, this div acts as if 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 can not recreate this problem in the violin. This does not happen in Chrome, FF, or IE (10+).

Here is a screenshot of the difference between the visual (character counter field) and the programmed location (highlighted area).

At the top there are more real css and html layers, but here is the following code:

html simplified

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

SCS

 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 is on top of the programmed location?

Answer 1

ERROR:

I managed to trace the error in the hardware acceleration "trick" that we used by including these two rules in the parent element:

 transform: translateZ(0) perspective: 1000 

By removing these two rules, the element now behaves as expected. Better info on this issue: CSS performance relative to translateZ (0)

Bonus bug fix: Removing these rules in the HTML body caused various issues with overlapping elements in our PhantomJS / Poltergeist tests. Apparently, PhantomJS does not move elements on its own. We have included these rules only for tests, and currently everything is working fine.

ORIGINAL DECISION:

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> 

Answer 2

Try this script

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

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

you need this css style