我在IE10触控设备上遇到大型固定背景图像的问题。 （我有一台带有Windows 8的三星Slate，但我猜测在Surface上可以看到相同的行为，但无法确认。）
要将大型固定图像作为网站的背景，有两种方法：
1）在body元素上使用CSS3背景属性 - 这在IE10触控设备上运行良好。但是，背景在iOS浏览器中与视口一起滚动。所以到第2步。
2）将背景图像放在body元素中，可以是内嵌图像，也可以是div。将图像（或包含div）设置为具有低z-index的位置固定。这解决了iOS问题，并且在我测试的所有浏览器上都能正常工作，除非在IE10上进行触摸滚动。在滚动期间，背景图像“抖动”或上下闪烁几个像素。滚动结束后，它都会正确渲染，但抖动效果看起来很糟糕。在主体上使用CSS3背景属性时不会发生这种情况。
要查看此效果的简单网站是使用IE10触控设备并浏览至Backstretch。这个jQuery插件使用了body中div的图像。
我很难解决这个问题。它可能只是一个渲染错误，但它很烦人，迫使我决定使用哪个浏览器。有什么想法吗？
答案 0 :(得分：0)
快速简便的解决方案是使用布局引擎。 Layout Engine使用浏览器功能检测来检测访问者的浏览器/浏览器版本，并将相应的样式添加到html标记（类似于Modernizr）。它可以检测到许多流行的浏览器，包括一些移动设备，以及IE7，IE8，IE9，IE10和IE11。这很有用，因为抖动也发生在IE11触摸中。
使用独有的IE10和IE11样式将背景样式添加到正文并关闭默认背景解决了IE10和IE11触摸上的背景抖动，并在相当繁重的设备/浏览器测试中表现良好。在iOS或其他浏览器中没有显示正文背景，并且额外的JavaScript对移动设备的下载速度有一个微小但略微明显的影响。
http://mattstow.com/layout-engine.html
其他解决方案包括CSS hacks和IE10和IE11的JavaScript检测（类似于上面）。请谨慎使用css hacks时样式不适用于其他浏览器版本，以及基于 User Agent 检测的JavaScript解决方案。
您可能已经知道这一点，但固定的背景是错误的，并且也可能在移动设备中抖动。一种解决方案是应用背景附件：滚动而不是背景附件：固定;为移动设备的背景。针对移动设备的可能解决方案包括使用“max-device-width”来定位较小功能手机和智能手机屏幕尺寸的媒体查询，和/或使用Categorizr.js（通过浏览器用户检测移动设备，平板电脑，桌面，电视）代理，并为html标记添加适当的样式。）