作为一个办公系统常见的设计，便是标签化页面。左侧或上侧是导航菜单，主要的功能区使用标签页面来进行切换。在BS系统中，常见的标签页切换（无论是自己写的还是用框架界面等）大多使用iframe作为内联框架进行显示的。虽然也有直接使用div作为框架内容页面展示的（使用Ajax进行额外加载），但是对于较为复杂而独立的页面，还是使用iframe更简单可靠。

在大多数桌面浏览器上，这都是OK的。但是在移动浏览器上，问题便来了。

作为一个常见的设计，在一个框架页面中，如果内容很长，浏览器会自动加上滚动条供你滚动。但是在iOS上，苹果在2011年的一次更新中，内置的safari浏览器会停止在一个iframe上显示滚动条，而是全部展示。可能是他们觉得一个页面的不同区域会滚动不同的内容会给用户的操作带来不确定性吧，但是这个粗鲁地去掉对于大多数情况均是噩梦。

典型的就是，上述的结构在iOS上废掉了，只能看到第一眼看到的一部分，无法滚动页面，进而导致全屏框架页面几乎无法操作。

在后来的系统更新中，苹果提供了新的私有属性来启用这种滚动。那就是新的 -webkit-overflow-scrolling 样式。将其设置为“touch”，将会允许用户使用平移操作来滚动一个较长的内容。当然，你需要设置内容溢出时允许滚动，而且这个样式需要设置在容器上，而不是要滚动的元素本身。

这里以 jEasyUI 为例。jEasyUI 的标签页，使用框架作为内容页时，其DOM结构如下图所示：

从图中可以看出，在jEasyUI中，一个标签页的内容是放置在css类为 panel-body 下的。如果要在这里对内部的iframe实现滚动，那么可以通过下列的样式来实现这个功能：

 .panel–body{
    -webkit-overflow-scrolling:touch;
    overflow:auto;
}

经过上述操作后，你会发现，可以滚动了，但是滚动出来的东西几乎不可用。比如移动后，原本应该显示内容的地方，却显示为空白；这时候双击空白的地方缩放，再双击下缩放回去，页面能恢复，但是你滚动到其它地方后，相同的情况再次出现。有时候等待一会儿内容会自动出现，但有时候等你喝完一杯咖啡也还是空白。

看起来这是safari的渲染问题。幸运的是爱好折腾的IT同仁们找到解决的办法了。

那就是强制启用硬件加速。

如何强制启用硬件加速呢？这可以通过加上CSS3中的3D变换来让浏览器强制启用加速。当一个对象需要用到3D变换后，浏览器将会把渲染模式强行使用硬件加速来实现。

在上面的例子中，便是为body元素加上3D变换样式：

body{
    -webkit-transform: translate3d(0, 0, 0);
}

这个3D变换本身对视觉效果没有任何变更。

幸运的是，以上的修改对桌面版浏览器没有任何影响，长出一口气，幸好幸好啊。

【更新@2012.10.18：这个属性的增加会导致在Chrome中的position:fixed属性失效，目测到目前的最新每夜版（24）都未修复此BUG。】

为了测试这玩意儿，还跟老总们借了iPad来测试。看来自己不喜欢不用不代表你就可以脱离干系……

相关资料：

• Strategies for the iFrame on the iPad Problem
• CSS3 property webkit-overflow-scrolling:touch ERROR
• IFRAMEs and the Safari on the iPad, how can the user scroll the content?
• JS版的解决方案：iScorll
• JS版的片段：iOS fix for iframe cropping