CODEWITHSUNDEEP
javascripthtmlcss
Derek Lawrence
Derek Lawrence

Reputation: 1608

Force size to viewport with css while rotating div

Im having trouble getting a rotated div to not extend passed the bottom of the viewport. What's happening is fine on android but on ios devices it allows the window to scroll vertically.

The css for the div is as follows.

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: #030C22;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-touch-action: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.BadOrientation {
    background-image: url( 'assets/preloader/rotateDevice.png' );
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    height: 100%;
    width: 100%;
}

.BadOrientation--Landscape {
    -ms-transform: rotate( 90deg );
    -webkit-transform: rotate( 90deg );
    transform: rotate( 90deg );
}

the offending div is.

<div id="noLandscape" class="BadOrientation BadOrientation--Landscape" style="visibility: hidden; background-size: contain;"></div>

On android browsers this seems to work fine and users are not able to scroll but on ios devices the user can scroll vertically. I cant seem to get it to rotate and get the overflow to be hidden.

Upvotes: 1

Views: 259

Answers (1)

Vahid
Vahid

Reputation: 7551

As your div is absolutely positioned, to hide the div, the container (the body) should be relatively positioned! So just add position: relative to body and it should work.

I'm not sure about this but this css styles also may be needed:

html, body {
    height: 100%;
}

Upvotes: 1

Related Questions