search

ericdrowell / KineticJS

KineticJS is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://www.kineticjs.com
3.98k stars 753 forks source link

Stage not resizing on orientation change #1068

Open minu-k opened 8 years ago

minu-k commented 8 years ago

Am creating an image editor library with the support of KinetiJS. In my html, 

<div id="editorarea" class="fill">
<div id="imageContainerDiv" class="imageContainerDiv" >
    <div>....</div>
    <div>....</div>
    <div id='rotateouterDiv' class='rotateouterDiv' >
        <textarea placeholder='Enter You Text here' id='inputField' name='graffiti' class='textContainerMob'></textarea>
    </div>
    <div id='imageContainer'></div>
</div>

Then creating a stage

_kineticStage = new editor._Stage({
            container : 'imageContainer',
            width : $('#editorarea').width(),
            height : $('#editorarea').height()
        });

Kinetic.Util.extend(editor._Stage, Kinetic.Stage);

And adding an image,

  _kineticImage = new editor._Image({
                x : 0,
                image : img,
                y : 0,
                draggable : true,
            });
 layer.add(_kineticImage);

The CSS applied is,

#editorarea {
width: 100%;
height: 80%;
margin-top: .1%;

min-height: 70%%;
display: block;
border-width: 2px;
border-style: solid;
}

.fill {
min-height: 85%;
height: 90%;
}

.imageContainerDiv {
width: 100%;
height: 100%;
z-index: 0;
left: 0;
right: 0;
background-color: #FFF;
display: block;
background-image: url(../images/back_pattern.png);
background-repeat: repeat;
overflow: hidden;
}

The text area should be on the top of the image. In this case, I placed that div containing the text area using the @media queries, for supporting different screen size and orientation. The issue occurs when following the steps: load the page in portrait, then change the device orientation to landscape. Then the position of text area is not correct. This is because the kinetic stage is not properly resizing on orientation change (only the area with image). Can anyone help me to resize it properly? This should work in touch devices.

Thanks....

ghost commented 8 years ago

similar issue here with fullscreen. did you find a solution?

dreamyguy commented 7 years ago

For the record, I could only reproduce it on iOS. It failed on all these:

macOS Simulator (iOS 9.2 Safari) iOS 10.2.1 Safari iOS 10.2.1 Chrome iOS 10.2.1 Firefox iOS 10.2.1 Firefox Focus iOS 10.2.1 Mercury

I tested it on a Samsung (Chrome) and could not reproduce the problem.