移动 Safari - translate3d 像素限制？答案

【问题标题】：Mobile Safari - translate3d pixel limit?移动 Safari - translate3d 像素限制？
【发布时间】：2012-07-03 08:45:08
【问题描述】：

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

【问题讨论】：

标签： ios mobile css iphone-web-app webkit-transform

【解决方案1】：

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

【讨论】：

非常感谢您的回答。所以我想甚至没有一些骇人听闻的方式“克服”这个限制？
有几种可能的解决方案 - 第一个是不使用翻译，而是使用位置更改。第二是将图像分割成子图像网格 - 这可能工作
嗨迈克尔，我正在考虑使用 translate3d 进行硬件加速，所以使用位置并不是一个真正的选择。将图像切成网格也不起作用，因为图像都在具有此限制的同一容器中
这不是您问题的答案，对此感到抱歉，但 Google 使用磁贴是有原因的.在页面上保留整个 10k 像素的图像有点浪费内存。