1

我有以下 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 值才能使整个想法生效？任何帮助深表感谢。

4

1 回答 1

3

是的，你已经达到了极限。Translate3D'd 元素必须适合 GPU 纹理内存，当您“过度或过度翻译”时，这可能会导致整个纹理被转储。请参阅有关纹理内存限制的 Apple 文档。

于 2012-07-03T00:45:08.603 回答