Home/ Questions/Q 8189117
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T03:09:52+00:00

I have the following HTML structure <body> <div id=graphic> <div id=wrap> <svg width=8000px height=32000px>

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0