position a div off screen in Opera Mobile (overflow:hidden not working)

1.4k views Asked by At

I'm working on a responsive web layout, with a menu that is positioned off screen - basically I'm using the following code:

CSS:

body {
    overflow:hidden;
}
.offscreen {
    background:#F00;
    height:100px;
    position:absolute;
    right:-90px;
    top:100px;
    width:100px;
}

HTML:

<body>
    <div class="offscreen">
    </div>
</body>

Demo can be found here.

The problem: Opera Mobile (12.10 on Android 4.1.2) positions the div off screen, but allows scrolling - apparently it ignores the overflow:hidden rule.

Demo page

My question:

  • Any ideas how I can make Opera Mobile hide the div & disable the horizontal scroll?
1

There are 1 answers

0
Damonsson On

Try this:

overflow:hidden; 
overflow-y:hidden; 
overflow-x:hidden;

Not tested.