IPad Rotate and SVG with jQuery Mobile

Question

I have an HTML page containing the following. The svg.js file is a reference to svgweb, from http://code.google.com/p/svgweb/

If you view this on an ipad, and rotate from horizontal to vertical several times, the chart disappears off the bottom of the page. It seems that each time we go back to vertical, the svg jumps down the page a little.

Clues as to where to start looking appreciated.

<!DOCTYPE html>
<html>
<head>
  <title>Dashboard</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
  <script src="/site_media/svgweb/svg.js" type="text/javascript"></script>
  <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
 <div data-role="page" id="SingleChart" data-theme="a"> 
  <div data-role="header"  data-position="fixed">
    <h1>Chart Type Pie</h1>
  </div><!-- /header -->

  <div data-role="content" >

   <div id="chartDiv">
<script type="image/svg+xml">
 <svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 viewBox="0 0 300 300" width="100%" height="100%">
<path id='s0' d='M150,150 L50,150 A100,100 0 0,1 57 111 L150,150' style='stroke:#660000; fill:green;'/>
<path id='s1' d='M150,150 L57,111 A100,100 0 0,1 150 50 L150,150' style='stroke:#660000; fill:orange;'/>
<path id='s2' d='M150,150 L150,50 A100,100 0 0,1 220 220 L150,150' style='stroke:#660000; fill:green;'/>
<path id='s3' d='M150,150 L220,220 A100,100 0 0,1 50 150 L150,150' style='stroke:#660000; fill:orange;'/>

<text x="-50" y="50" font-family="Verdana" font-size="24" font-weight="bold" text-anchor="middle" fill="rgb(200,200,200)" transform="rotate(270 10 100)">Example Chart</text>
</svg>

  </div><!--content-->
</div><!--page-->
</body>
</html>

Negative 180 wouldn't work for me.. I had to use positive 180 to trigger and upside-down rotation. — Benjamin, Oct 05 '11 at 00:19

score 3 · Answer 1 · edited May 23 '17 at 12:18

I experienced a similar bug. The fact that it only occurs on the iPad (not on iphone or android) after several rotations leads me to suspect that it is an IPad specific browser bug. As a quick fix I implemented a solution with javascript that detected rotation and inserted alternate html/css. If your SVG image is small you might just try reinserting it into the DOM on rotation to force a revaluation.

window.onorientationchange = function(){

    var orientation = window.orientation;

    // Look at the value of window.orientation:

    if (orientation === 0){
   // iPad is in Portrait mode.

    }

    else if (orientation === 90){

        // iPad is in Landscape mode. The screen is turned to the left.

    }


    else if (orientation === -90){

        // iPad is in Landscape mode. The screen is turned to the right.

    }

   else if (orientation === -180){

        // Upside down portrait.

    }

}

Code taken from: iPad doesn't trigger resize event going from vertical to horizontal?

Thanks for this. Just one thing, looks like you're missing upside down portrait: "orientation === 180" — Paul Shapiro, Jul 06 '11 at 14:54

score 0 · Answer 2 · answered Jan 14 '12 at 21:24

Updated script to use "180" rather than "-180" for // Upside down portrait.

Also added to check if platform is strickly equal to iPad to run.

if(navigator.platform === 'iPad') {
        window.onorientationchange = function() {

        var orientation = window.orientation;

        // Look at the value of window.orientation:
        if (orientation === 0) {
        // iPad is in Portrait mode.

        } else if (orientation === 90) {
         // iPad is in Landscape mode. The screen is turned to the left.

        } else if (orientation === -90) {
         // iPad is in Landscape mode. The screen is turned to the right.

        } else if (orientation === 180) {
        // Upside down portrait.

        }
      }       
    }

IPad Rotate and SVG with jQuery Mobile

2 Answers2