Internet explorer IE10触摸设备上的固定背景图像在滚动时抖动

我在IE10触摸设备上有一个大的固定背景图像问题。（我有一台装有Windows8的三星平板电脑，但我猜在表面上也可以看到同样的行为，但无法确认。）

要将大型固定图像作为站点的背景，有两种方法：

1） 在body元素上使用CSS3背景属性-这在IE10触摸设备上非常有效。但是，在iOS浏览器中，背景会随视口一起滚动。继续执行步骤2

2） 将背景图像作为内联图像或div放置在body元素内。使用低z索引将图像（或包含div）设置为位置固定。这解决了iOS问题，在我测试过的所有浏览器上都能正常工作，除了在IE10上触摸滚动时。在滚动过程中，背景图像“抖动”或上下闪烁几个像素。一旦滚动结束，它将被正确渲染，但抖动效果看起来很可怕。在主体上使用CSS3背景属性时不会发生这种情况

看到这种效果的一个简单站点是使用IE10触摸设备并浏览到。这个jQuery插件在主体的div中使用一个图像

---

我不知道如何解决这个问题。这可能只是一个渲染错误，但它很烦人，迫使我决定使用哪个浏览器。有什么想法吗？

一个简单快捷的解决方案是使用布局引擎。布局引擎使用浏览器功能检测来检测访问者的浏览器/浏览器版本，并将相应的样式添加到html标记（类似于Modernizer）。它可以检测许多流行的浏览器，包括一些手机浏览器、IE7、IE8、IE9、IE10和IE11。这很有用，因为抖动也发生在IE11触摸屏中

使用独有的IE10和IE11样式向主体添加背景样式并关闭默认背景，解决了IE10和IE11触摸屏上的背景抖动问题，在相当繁重的设备/浏览器测试中表现良好。iOS或其他浏览器中没有显示主体背景，额外的JavaScript对移动设备的下载速度影响很小，但稍微明显

---

其他解决方案包括CSS黑客，以及针对IE10和IE11的JavaScript检测（类似于上文）。使用css破解和基于用户代理检测的JavaScript解决方案时，请注意，您的样式不适用于其他浏览器版本

• 浏览器黑客
• 将特定于IE的CSS移动到@media块中
• IE10黑客
• 堆栈溢出

---

你可能已经知道这一点，但是固定背景是有缺陷的，并且在移动设备中也会抖动。一种解决方案是应用背景附件：滚动而不是背景附件：固定；用于移动设备中的后台。针对移动设备的可能解决方案包括使用“最大设备宽度”来针对较小功能手机和智能手机屏幕尺寸的媒体查询，和/或使用Categorizr.js（通过浏览器用户代理检测手机、平板电脑、桌面、电视，并将适当的样式添加到html标记）

• 分类ZR.js
• 关于固定/移动电话的条款
• 背景大小的支持表
• 固定位置支撑台