如何複製在iOS上修復的background-attachment

我試圖在iOS上爲一個學校項目獲得固定背景圖像div。我一直在使用如何複製在iOS上修復的background-attachment

background-attachment: fixed;

但這導致了怪異的大小和移動Safari瀏覽器沒有滾動效果。 Here is the site我正在合作;我目前用於引用div圖像背景的方法在桌面上運行良好，但在iOS上完全失敗。

不知何故，http://www.everyonedeservesgreatdesign.com得到了這個工作。我很難跟蹤代碼，因爲他們正在使用某種類型的方形空間模板，但它看起來像是將圖像放入一個position:fixed div中，該div由其父position:relative父div剪切。我的印象是，無法將position:fixed div與視口以外的任何東西剪切在一起，所以我很好奇這裏發生了什麼。

關於如何在我的網站中實現固定圖像div背景的這種方法的任何想法？

來源

2014-04-23 QRohlf

嘿，這與你的問題沒有關係，但底部的鏈接打破了你的移動佈局。嘗試將一些overflow-x隱藏到主體和郵件分區，以便它不水平滾動。 – fernandopasik

這被標記爲重複，但沒有重複的問題已被確定，這是最有價值的問題。 SMH。 –

過去曾經有人問過，顯然移動瀏覽器的成本很高，所以它被禁用了。

檢查this comment by @PaulIrish：

固定背景有巨大重繪成本和抽取滾動性能，這一點，我相信，它爲什麼被禁用。

你可以看到解決方法，此在這個帖子：

Fixed background image with ios7

Fixed body background scrolls with the page on iOS7

來源

2014-05-02 03:57:53 fernandopasik

我很好奇http://www.everyonedeservesgreatdesign.com/所使用的具體技術，它似乎是獨一無二的，因爲它使用帶位置的圖像：而不是基於JavaScript的解決方法。 – QRohlf

這不僅僅是CSS，請看#parallax-images div div image-container has inline css。這是在https://static.squarespace.com/static/ta/515c7b5ae4b0875140c3d94a/2476/scripts/site.js – fernandopasik

處理啊，謝謝。我真的很想知道他們是如何設法在沒有js的情況下取消效果的;看起來答案是他們沒有。 – QRohlf

它看起來對我來說，背景圖像是不實際的背景圖像...該網站已背景圖像和兄弟分區中的引號與包含已分配圖像的div的子節點：fixed;引號div也被賦予透明背景。

wrapper div{ 
    image wrapper div{ 
     div for individual image{ <--- Fixed position 
      image <--- relative position 
     } 
    } 
    quote wrapper div{ 
     div for individual quote{ 
      quote 
     } 
    } 
}

來源

2014-05-08 16:43:47

如何複製在iOS上修復的background-attachment

回答

相關問題