Webkit與Firefox的背景位置和背景附件

Webkit渲染背景位置的方式與Firefox的方式有點問題。我正在製作一個自定義動畫，該動畫基本上是一個帶有3D旋轉木馬的大背景圖像，用於選擇主圖像+背景圖像。然後，動畫將輪播幻燈片放到其周圍，並用它拖動背景（請參見下面的URL）。Webkit與Firefox的背景位置和背景附件

問題是，該頁面呈現了我想如何在Firefox中使用，而不是在Chrome/Safari中。他們在這個特定的佈局中以不同的方式處理background-position/background-attachment。我不確定Chrome的核心是什麼，但它似乎是右下象限中的東西。

下面是我們要做的事情的一個簡明例子，所以它更有意義。在FF的偉大工程，但內部窗口背景的中心偏了WebKit中： http://ps12.pointsourcellc.com/webkitTest/test/test.html

我們使用固定的背景與中心/頂部定位和含有填充兩個真正的背景和中心div中的一個，即：

#aboutView .cardFront { 
background-image: url('../images/bay_bridge5570.jpg'); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position:center top; 
background-size: contain; 
}

在此先感謝您的任何建議。我非常難以理解導致這個問題的原因，也沒有任何運氣可以搜索到。

更新：同事和我發現有點的「修復」，但我們仍然不滿意的話，並不能確定爲什麼形象定位是關閉擺在首位：

刪除.selectedView -webkit-transform：translate（0px，0px）;部分CSS
刪除-webkit-backface-visibility：hidden;部分CSS（這使得使用翻轉動畫更加困難，但沒有它我們不能使它居中......）
添加webkit特定的背景圖像位置：0px 75px;到中心

我不知道爲什麼它是75像素或爲什麼背面vis影響它，但這給了我們一些排隊。不幸的是，增加這種額外的翻譯會導致過度的閃爍，所以我們仍在努力尋找更好的解決方案。

來源

2012-08-31 user1639050

如果您刪除background-attachment：fixed，它們都表現出相同的行爲。我不認爲這是必要的，因爲你已經應用背景大小來包含任何。

來源

2012-08-31 15:48:08 Brian

感謝Brian的快速反應。刪除它實際上是影像的中心，但我們正在尋找它，像Firefox版本那樣無縫地轉換到背景中。刪除該屬性會導致中間div內部的較小版本的背景不會溢出到背景中。 – user1639050

好的，我看到你現在要做的效果。這絕對是奇怪的，它可能是一個具有這些背景屬性的webkit bug（特別是固定時居中）。在光明的一面，如果沒有找到其他解決方案，可以使用JS手動調整背景位置。 – Brian

Webkit與Firefox的背景位置和背景附件

回答

相關問題