Safari'de çalışmayan sabit konum 7

Question

Kaydırarak, hareket etmeden ekranın altında oturan sabit bir konum divum var. Ancak, Safari'de bu div kesinlikle konumlandırılmış gibi davranır ve içeriğin geri kalanıyla yukarı ve aşağı hareket eder. "Eleman İnceleyin" i tıklattığımda, görsel (gerçek?) Konum değil, programlanmış (istenen) konum vurgulanır.

Bu sorunu bir kemanda yeniden oluşturamıyorum. Bu, Chrome, FF veya IE'de (10+) gerçekleşmiyor.

Görsel (karakter sayımı kutusu) ile programlanan konum (vurgulanan alan) arasındaki farkın ekran görüntüsü.

Orada bu üstündeki css ve html daha gerçek katmanları, ama burada acil kod: basitleştirilmiş

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

}

Bu div, Safari'de nasıl davranabilir, böylece görsel programlanmış konumun üstünde oturur?

Answer 1

BUG BULUNAMADI bu CSS stil ihtiyaç bu keman deneyin: Bir donanım hızlandırma "hile" hatayı iz başardı

Bu iki kuralı bir ana öğeye ekleyerek kullanıyorduk:

transform: translateZ(0) 
perspective: 1000 

Bu iki kuralları kaldırarak, öğe artık beklendiği gibi davranır. CSS performance relative to translateZ(0)

Bonus Bug Fix: Burada bu konuyla ilgili daha fazla iyi bilgi HTML gövdesine bu kuralları Çıkarma bizim PhantomJS/Poltergeist testlerde çeşitli unsur-örtüşme sorunları neden oldu. Görünüşe göre PhantomJS, öğeleri kendi başına doğru şekilde hareket ettirmiyor. Bu kuralları sadece testler için ekledik ve şu anda her şey yolunda gidiyor.

ORİJİNAL ÇÖZÜM:

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

Eğer