Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stage not resizing on orientation change #1068

Open
minu-k opened this issue Dec 9, 2015 · 3 comments
Open

Stage not resizing on orientation change #1068

minu-k opened this issue Dec 9, 2015 · 3 comments

Comments

@minu-k
Copy link

minu-k commented Dec 9, 2015

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
Copy link

ghost commented Mar 18, 2016

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

@dreamyguy
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants
@dreamyguy @minu-k and others