我在 IE10 触摸设备上遇到大型固定背景图像的问题。 (我有一台运行 Windows 8 的 Samsung Slate，但我猜测在 Surface 上可以看到相同的行为，但无法确认。)
要将大的固定图像作为网站的背景，有两种方法:
1) 在 body 元素上使用 CSS3 背景属性 - 这在 IE10 触摸设备上运行良好。但是，在 iOS 浏览器中背景会随着视口(viewport)一起滚动。继续执行第 2 步。
2) 将背景图像放置在 body 元素内，作为内联图像或在 div 内。将图像(或包含 div)设置为具有低 z-index 的固定位置。这解决了 iOS 问题，并且在我测试过的所有浏览器上都能正常工作，但在 IE10 上触摸滚动时除外。在滚动几个像素的过程中，背景图像会“抖动”或上下闪烁。一旦滚动结束，它就全部正确渲染了，但是抖动效果看起来很糟糕。在主体上使用 CSS3 背景属性时不会发生这种情况。
查看此效果的一个简单站点是使用 IE10 触摸设备并浏览至 Backstretch .这个 jQuery 插件在主体的 div 中使用图像。
我不知道如何解决这个问题。它可能只是一个渲染错误，但它很烦人并迫使我决定使用哪个浏览器。有什么想法吗？
最佳答案
一个快速简单的解决方案是使用布局引擎。 Layout Engine使用browser feature检测来检测访问者的浏览器/浏览器版本，并在html标签中添加相应的样式(类似于Modernizr)。它检测许多流行的浏览器，包括一些移动浏览器，以及 IE7、IE8、IE9、IE10 和 IE11。这很有用，因为在 IE11 触摸中也会出现抖动。
使用 IE10 和 IE11 独有的样式为正文添加背景样式并关闭默认背景，解决了 IE10 和 IE11 触摸时背景抖动的问题，并且在相当繁重的设备/浏览器测试中表现良好。正文背景在 iOS 或其他浏览器中不显示，额外的 JavaScript 对移动设备的下载速度影响很小，但略显明显。
http://mattstow.com/layout-engine.html
其他解决方案包括 CSS hack 以及针对 IE10 和 IE11 的 JavaScript 检测(与上述类似)。使用 css hack 和基于 User Agent 检测的 JavaScript 解决方案时，请注意您的样式不适用于其他浏览器版本。
- 浏览器黑客 http://browserhacks.com/
- 将 IE 特定的 CSS 移动到@media block 中 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;用于移动设备的背景。针对移动设备的可能解决方案包括使用“max-device-width”来针对较小的功能手机和智能手机屏幕尺寸的媒体查询，和/或使用 Categorizr.js(通过浏览器用户检测手机、平板电脑、台式机、电视agent，并在 html 标签中添加适当的样式)。
关于internet-explorer - 修复了 IE10 触摸设备上滚动时背景图像抖动的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16409927/