Mobile Safari - translate3d pixel limit?

StackOverflow https://stackoverflow.com/questions/11298821

Question

I have the following HTML structure 

<body>
  <div id="graphic">
   <div id="wrap">
     <svg width="8000px" height="32000px">
      ....
     </svg>
   </div>
  </div>

And the following CSS applied to it:

#graphic {
  width: 768px;
  height: 1004px;
  overflow: hidden;
}

#wrap {
  width: 768px;
  height: 1004px;
  -webkit-transform: scale(1) translate3d(0, 0, 0);
}

Using CSS3 Animations I want to pan / zoom on a very large svg graphic. It is working...kind of. I discovered a problem on the iPad that when setting the y-value of translate3d to below ~ 16500px the graphic is not displayed anymore (In Safari or Chrome it works totally fine). I thought that there might be a limit to the height / width of rendering SVGs on mobile Safari, but removing the overflow:hidden from the #graphic container lets me scroll all the way down and everything it displayed correctly.

Has anyone heard of or experienced similar limitations / Is there some CSS value I have to set for this whole think to work? Any help is much appreciated.

Was it helpful?

Solution

Yes, you have hit a limit. Translate3D'd elements must fit into GPU texture memory, and when you "over or under translate" this can cause the whole texture to be dumped. See the Apple documentation on texture memory limitations.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top