Home Kinetic JS stage size incorrect on iPad
Reply: 0

Kinetic JS stage size incorrect on iPad

user1451
1#
user1451 Published in June 20, 2018, 7:39 am

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?

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.316386 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO