固定位置在Safari 7中不起作用

我有一個固定位置div，位於屏幕底部，因爲我正在滾動，而不是移動。然而，在Safari上，這個div就像絕對定位一樣，隨着其他內容上下移動。當我點擊「檢查元素」時，編程的（所需的）位置被突出顯示，而不是視覺（實際的？）位置。固定位置在Safari 7中不起作用

我無法在小提琴中重新創建此問題。這在Chrome，FF或IE（10+）中不會發生。

下面是視覺（字符計數框）和編程位置（高亮區域）之間區別的屏幕截圖。

Screenshot of phantom div

有對這些頂級的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中表現出色，以便視覺位於編程位置的頂部？

來源

2014-09-29 steel

可以共享HTML和CSS？ – 2014-09-29 20:35:58

不幸的是，我不能。我知道這是一個長鏡頭，但我認爲我會嘗試。 – steel 2014-09-29 20:37:11

不，它會很容易我認爲>所以你需要一個div總是附加到窗口的頂部，每當你滾動---如果我沒有錯？ – 2014-09-29 20:39:30

發現缺陷：

我能夠追蹤錯誤的硬件加速「絕招」我們通過將這兩個規則包含在父元素中來使用：

transform: translateZ(0) 
perspective: 1000

通過刪除這兩個規則，現在該元素的行爲如預期。 CSS performance relative to translateZ(0)

獎金錯誤修正：關於這個問題，在這裏更多的好信息刪除在HTML body這些規則引起我們的PhantomJS /鬼驅試驗各種元素的重疊問題。顯然PhantomJS不會自行移動元素。我們僅將這些規則包含在測試中，而且目前一切正常。

原來的解決方案：

我能夠從父容器拉動計數器來解決這個問題：

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

來源

2014-10-07 19:07:00 steel

-1

試試這個小提琴

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

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

你需要這個CSS樣式

來源

2014-09-29 20:52:26

這堅持到div的頂部。我期待着將其貼到窗口的底部（或頂部，無論哪個）。 – steel 2014-09-29 20:55:42

我已更新答案 – 2014-09-29 20:59:03

現在，這堅持到div的底部。我正在尋找這個堅持到窗口底部，以便當我上下滾動div時，這仍然存在。 – steel 2014-09-29 21:01:26

固定位置在Safari 7中不起作用

回答

相關問題