在 iPad 上用 CSS3 过渡替换 JQuery animate，为什么元素在过渡时消失？

Question

我提前道歉，这是我的第一个问题。

我有一个简单的滑块，由多个列表项 (li) 组成，每个列表项都包含一个 Google 图表。每个 Google 图表本质上都是一个 iFrame，其中包含构成图表的 SVG 元素。每个图表都有特定的设置大小。使用 CSS3 过渡是因为 jQuery 在 iPad 上慢得像糖蜜，尤其是 iPad 1：

<ul class = "slider">
   <li>{Google Chart 1}</li>
   <li>{Google Chart 2}</li>
   <li>{..and so on}</li>
</ul>

我在 iPad 上有以下代码，绑定到用于推进滑块的链接按钮

var toMove = container.find('ul.slider');

//For purposes of this example I'm setting this to 300. In reality this is calculated by the index of the slider and the width of each chart

var pixelsToMoveBy = 300; 

toMove.css('-webkit-transition', '-webkit-transform 0.5s linear, margin-left 0.5s linear');
toMove.css('-webkit-transform', 'translate3d(' + pixelsToMoveBy + 'px, 0px, 0px)');

这在桌面 Chrome 和 Safari（Mac 和 Mac 上）中运行良好和PC），但在iPad上，只显示第一个图表，后面的图表将不可见，我不知道为什么。恢复到 jQuery 方式：

 toMove.animate({ marginLeft: pixelsToMoveBy + "px" }, 500);

..将会正常工作。如果我执行以下操作

toMove.find('iframe').contents().find('body').css('background-color', 'red');

，甚至

toMove.find('iframe').contents().find('#chartarea').css('background-color', 'green');

然后我可以明显看到 iFrame 和图表确实存在，但 SVG 元素似乎没有渲染。

谁能向我解释为什么我看不到其他图表？

更新3

我制作了一个简单的 html 文件来说明问题。它使用 iScroll，有效地使用 webkit 转换：

http://reactiondynamics.com/lab/ipad.html

iPad 上只会显示第一个 iFrame。第二个被截断了，其余的都没有出现。然而，它在桌面上的所有其他浏览器中运行良好。

更新2： 基本上我试图得到与苹果滚动条相同的东西，但它在 iPad 上的操作方式是流畅的。

更新：

在搜索 Safari 文档时，我发现了下面的引用此处

注意：将溢出设置为隐藏的元素无法以 3D 方式渲染其子元素，并渲染为虽然变换样式设置为平面。

看起来无法完成，因为在“平面”模式下，图表不会出现。