Vị trí cố định không hoạt động trong Safari 7

Question

Tôi có vị trí cố định div nằm ở cuối màn hình khi tôi cuộn, không di chuyển. Tuy nhiên, trên Safari, div này hoạt động như nó được định vị hoàn toàn và di chuyển lên xuống với phần còn lại của nội dung. Khi tôi nhấp vào "Kiểm tra phần tử", vị trí được lập trình (mong muốn) được đánh dấu, chứ không phải vị trí trực quan (thực tế?).

Tôi không thể tạo lại vấn đề này trong một câu hỏi. Điều này không xảy ra trong Chrome, FF hoặc IE (10+).

Dưới đây là ảnh chụp màn hình về sự khác biệt giữa hình ảnh (hộp số ký tự) và vị trí được lập trình (khu vực được đánh dấu).

Có lớp thực tế hơn về css và html trên đầu trong số này, nhưng đây là mã ngay lập tức:

html đơn giản

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

}

Làm cách nào để làm cho div này hoạt động trong Safari, để hình ảnh nằm trên vị trí được lập trình?

Answer 1

BUG FOUND:

tôi đã có thể theo dõi các lỗi cho một phần cứng tăng tốc "lừa" chúng tôi đã sử dụng bằng cách bao gồm hai quy tắc này trong phần tử gốc:

transform: translateZ(0) 
perspective: 1000 

Bằng cách xóa hai quy tắc này, phần tử hiện hoạt động như mong đợi. Thông tin tốt hơn về vấn đề này tại đây: CSS performance relative to translateZ(0)

Sửa lỗi lỗi: Xóa các quy tắc trong nội dung HTML gây ra các vấn đề chồng chéo phần tử khác nhau trong các thử nghiệm PhantomJS/Poltergeist của chúng tôi. Rõ ràng PhantomJS không di chuyển các phần tử đúng cách. Chúng tôi bao gồm các quy tắc này chỉ cho các bài kiểm tra và hiện tại mọi thứ đều chạy tốt.

ORIGINAL SOLUTION:

tôi đã có thể khắc phục vấn đề này bằng cách kéo ngược từ container mẹ:

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

Answer 2

Hãy thử fiddle này

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

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

bạn cần điều này phong cách css