在iPad上用CSS3转换代替JQuery动画，为什么元素在转换时消失？

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

我有一个简单的滑块，由几个列表项（li’s）组成，每个列表项都包含一个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>

这在桌面Chrome和Safari（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和chart确实存在，但是SVG元素似乎没有呈现

谁能解释一下为什么我看不到其他图表

更新3

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

iPad上将只显示第一个iFrame。第二个被截断，其余的不显示。不过，它在桌面上的所有其他浏览器中都可以正常工作

更新2: 基本上，我试图得到与苹果scroller相同的东西，但它在iPad上的操作方式，也就是说，流畅

更新：

在浏览Safari文档时，我发现了下面的引用

注意：将“溢出”设置为“隐藏”的元素无法在三维中渲染其子元素，并且渲染时就像将变换样式设置为“平面”一样

看起来无法完成，因为在“平面”模式下，图形不会显示

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