Force size to viewport with css while rotating div

Question

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.

Possible duplicate of [overflow: hidden not working](https://stackoverflow.com/questions/3970455/overflow-hidden-not-working) — Vahid, Aug 16 '17 at 06:53

score 1 · Accepted Answer · answered Aug 15 '17 at 22:17

1

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%;
}

answered Aug 15 '17 at 22:17

Vahid

6,639
5
37
61

This did the trick all I needed to do was add position: relative to the css for body. Cheers – Derek Lawrence Aug 15 '17 at 23:01
Okay this also added another issue where on desktop the divs all have a width and height of 0. Mobile works fine – Derek Lawrence Aug 16 '17 at 21:10
So you just need to give this style: html,body {height: 100%; width: 100%} @DerekLawrence – Vahid Aug 17 '17 at 11:17
Any idea why on only ipad it would still be able to scroll vertically. This does not happen on iphones or android devices only ipads. – Derek Lawrence Sep 29 '17 at 17:36

Force size to viewport with css while rotating div

1 Answers1