在IE10觸控設備上固定背景圖像滾動抖動

Question

我在IE10觸控設備上有一個大的固定背景圖像的問題。 （我有一臺帶有Windows 8的三星Slate，但我猜測在Surface上可以看到相同的行爲，但無法確認。）

要有大的固定圖像作爲網站的背景，兩種方法：

1）在body元素上使用CSS3背景屬性 - 這在IE10觸摸設備上工作正常。但是，背景在iOS瀏覽器中隨着視口一起滾動。繼續步驟2.

2）將背景圖像放入body元素中，作爲嵌入圖像或div內。將圖像（或包含div）設置爲固定位置低z-索引。這解決了iOS問題，並且在我測試過的所有瀏覽器上都能正常工作，除非在IE10上觸摸滾動。背景圖像在滾動過程中「抖動」或閃爍幾個像素。一旦滾動結束，所有渲染都正確，但抖動效果看起來很可怕。在主體上使用CSS3背景屬性時不會發生這種情況。

一個簡單的網站看到這種效果是使用IE10觸摸設備和瀏覽Backstretch。這個jQuery插件在主體中使用div內的圖片。

我很難找到如何解決這個問題。它可能只是一個渲染錯誤，但它很煩人，迫使我決定選擇哪個瀏覽器。有任何想法嗎？

Answer 1

快速簡單的解決方案是使用佈局引擎。佈局引擎使用瀏覽器功能檢測來檢測訪問者的瀏覽器/瀏覽器版本，並將相應的樣式添加到html標籤（類似於Modernizr）。它檢測許多流行的瀏覽器，包括一些手機，以及IE7，IE8，IE9，IE10和IE11。這很有用，因爲在IE11 touch中也會出現抖動。

使用獨有的IE10和IE11風格將背景樣式添加到主體並關閉默認背景解決了IE10和IE11觸摸上的背景抖動問題，並且在相當繁重的設備/瀏覽器測試中表現良好。正文背景未在iOS或其他瀏覽器中顯示，並且額外的JavaScript對移動設備的下載速度具有最小但顯着的影響。

http://mattstow.com/layout-engine.html

---

其他解決方案包括CSS黑客和JavaScript檢測IE10和IE11（類似於上文）。請注意，使用css黑客時，您的樣式不適用於其他瀏覽器版本，並且基於用戶代理檢測的JavaScript解決方案不適用於其他瀏覽器版本。

• BrowserHacks http://browserhacks.com/
• 移動IE特定的CSS @media成塊 http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/
• IE10黑客http://www.impressivewebs.com/ie10-css-hacks/
• 堆棧溢出How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?

---

您可能已經知道這一點，但固定的背景是越野車，可以移動設備抖動也是如此。一種解決方案是應用background-attachment：scroll而不是background-attachment：fixed;爲移動設備中的背景。針對移動設備的可能解決方案包括使用「最大設備寬度」來定位較小功能手機和智能手機屏幕尺寸的媒體查詢，和/或使用Categorizr.js（通過瀏覽器檢測手機，平板電腦，桌面，電視機用戶代理 ，並將相應的樣式添加到html標籤中）。

• Categorizr.js http://skookum.com/blog/categorizr-js-device-detection-for-your-responsive-websites/
• 條上固定/移動http://bradfrostweb.com/blog/mobile/fixed-position/
• 支持表背景大小http://caniuse.com/#feat=background-img-opts
• 固定位置支持表http://caniuse.com/#feat=css-fixed