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

我在使用Safari 7（在OSX上）的網站上遇到問題。
網站地址是：
<編輯：地址不再有效。抱歉。 >固定定位在Safari 7中不起作用

如果您點擊垂直通訊按鈕，在內容框的右邊緣，會彈出一個覆蓋圖。

這個覆蓋在大多數瀏覽器上看起來不錯，但Safari瀏覽器存在問題。

疊加內容是固定寬度的絕對定位框。它包含一個帶「bg」類的div，它是一個CSS位置設置爲固定的CSS，CSS頂部，右側，底部左側設置爲0.

期望的（通常獲得的）效果是，這個BG框大小直到視口的寬度和高度。在safari中，它的行爲就好像它的位置設置爲「絕對」 - 它只是將容器div的寬度和高度設置爲大小。

這是Safari的一個已知問題嗎？是否有提交的錯誤？更新？

我可以通過重寫HTML，CSS和JavaScript的小部分來解決這個問題（如果有人有一個更簡單的解決方案，歡迎分享它！），但我首先想了解發生了什麼。

來源

2014-02-14 Rolf

我不知道發生了什麼事與定位的東西，但這裏是我的方法來獲得不同的瀏覽器相同的結果：

#overlays .overlay { /* line 1081 */ 
    ... 
    width: 100%; 
    height:100%; 
    ... 
} 

#overlays .overlay .content.text { /* line 1185 */ 
    ... 
    margin:0 auto; 
    ... 
}

來源

2014-02-21 01:56:15

工作。不知道發生了什麼，雖然... – Rolf

你可以使用Z-指數，但Z-指數不位置可靠：固定，如下圖所示：http://jsfiddle.net/mZMkE/2/改爲使用translateZ轉換。

transform:translateZ(1px);

您的頁面元素。

編輯：在您的代碼，添加這個CSS：

.bla, .projects, .contact { 
     -webkit-transform:translateZ(1px); 
     -moz-transform:translateZ(1px); 
     -o-transform:translateZ(1px); 
     transform:translateZ(1px); 
}

，然後從這些元素和.intro刪除的z-index裁判。

另外你也可以嘗試在其他瀏覽器以及

來源

2014-02-22 17:25:45 Catmandu

我不認爲這是一個堆積問題，而是一個箱子大小的問題。 – Rolf

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

回答

相關問題