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

Question

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?

Have you got a [viewport](https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag) defined? — yunzen, Mar 27 '13 at 11:56
Viewport is set to `width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;` — ptriek, Mar 27 '13 at 12:19
Thanks for pointing me to the `viewport` - I used ; as a seperator instead of , on the live example. This already fixed the second part of my problem (difference between demo & live example) — ptriek, Mar 27 '13 at 12:28

score 0 · Answer 1 · edited Mar 27 '13 at 12:28

0

Try this:

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

Not tested.

edited Mar 27 '13 at 12:28

Michaël

3,679
7
39
64

answered Mar 27 '13 at 11:37

Damonsson

1,532
14
25

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

1 Answers1