Kinetic JS stage size incorrect on iPad

Question

I created a new kinetic stage, and on Chrome it works fine. On the iPad, when I use Safari's developer tools and connect to the iPad, and check the DOM that is created, the dimensions of the new stage are NOT what I had specified.

ALSO NOTE: it doesn't matter if I specify actual numbers in the width and height. Same issue, the stage will ALWAYS be 768 x 361 on the iPad.

 //////    STAGE    /////////

  var stage = new Kinetic.Stage({
        width: window.innerWidth,
        height: window.innerHeight - 200,
        container: 'kineticStage',
        draggable: true
      });

// note: the following line reports in a desktop browser console, a stage height of exactly what I would expect.

console.log(stage.getHeight()); // reports (screenheight - 200)

However, Safari dev tools reports the following in the DOM on the iPad ...

canvas width="768" height="361" style="padding: 0px; margin: 0px; border: 0px; background-color: transparent; position: absolute; top:

One more thing... if I add this function...

function resize() {

    stage.setWidth(window.innerWidth);
    stage.setHeight(window.innerHeight-200);
    stage.draw();

};

window.addEventListener('resize', resize, false);

Then rotate the iPad, THEN the canvas resizes CORRECTLY. but, never on the first time loading...

Any ideas?

Answer 1

OK I posted this after 2 days of trying to find the problem, and suddenly I discovered it's this:

<meta name="viewport" content="width=device-width">

Deleting that line fixed the problem.