>我有以下HTML结构
<body>
<div id="graphic">
<div id="wrap">
<svg width="8000px" height="32000px">
....
</svg>
</div>
</div>
并应用了以下 CSS：
#graphic {
width: 768px;
height: 1004px;
overflow: hidden;
}
#wrap {
width: 768px;
height: 1004px;
-webkit-transform: scale(1) translate3d(0, 0, 0);
}
使用 CSS3 动画，我想平移/缩放一个非常大的 svg 图形。它正在工作...有点。我在iPad上发现了一个问题，当将translate3d的y值设置为低于~16500px时，图形不再显示（在Safari或Chrome中，它完全可以正常工作）。我认为在移动 Safari 上渲染 SVG 的高度/宽度可能有限制，但从 #graphic 容器中删除溢出：隐藏让我一直向下滚动并正确显示所有内容。
有没有人听说过或经历过类似的限制/我必须设置一些 CSS 值才能使整个想法正常工作？任何帮助都非常感谢。
是的，你已经达到了极限。Translate3D'd 元素必须适合 GPU 纹理内存，当您"过度或不足翻译"时，这可能会导致整个纹理被转储。请参阅 Apple 文档，了解纹理内存限制。