Question

我有以下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值设置为低于~16500xx时，图形不再显示（在Safari或Chrome中它完全正常）。我认为在移动Safari上渲染SVG的高度/宽度可能有限，但删除溢出：隐藏在#graphic容器中让我一直向下滚动以及它正确显示的所有内容。

有没有人听说过或经历过类似的限制/我是否需要设置一些CSS值才能让这整个人工作？非常感谢任何帮助。

Answer 1

是的，你已达到极限。 Translate3D'd元素必须适合GPU纹理内存，当你“翻译或翻译”时，这会导致整个纹理被转储。请参阅Apple documentation on texture memory limitations.

移动Safari - translate3d像素限制？

1 个答案: