Opera browser rendering bug: vertical overflow and absolute positioning. Anyone know a workaround?

Question

I'm trying to workaround what looks like a bug in Opera.

The undesired behaviour is that opera puts an unnecessary vertical scrollbar on the browser window.

This happens when I have an outer div which is position:relative and has overflow-y:auto and an nested inner div which is position:absolute and happens to be taller than the height of the browser window.

for example:

<style type="text/css">
    #outer {
        position: relative; 
        overflow-y: auto; 
        width: 200px; 
        height: 200px;
    }

    #inner {
        position: absolute; 
        height: 2000px; 
        width: 50%; 
        border: 2px dashed blue;
        background: deeppink;
    }
</style>

<div id="outer">
    <div id="inner">Inner</div>
</div>

Here is a demo:

http://www.jaysweeney.com.au/overflow_issue.html

Interestingly, as you can see from the above demo, this problem does not occur for horizontal overflow.

Here is a screenshot of what I'm seeing in Opera:

http://www.jaysweeney.com.au/screen.png

I'm using Opera 11.01 on OS X.

If anyone knows a workaround for this issue, please let me know. At the moment I'm stumped and its too much work to change my markup and javascript to not use absolute positioning.

Thanks in advance,

Jay.

Answer 1

It seems indeed like this is a bug of sorts.

Only workaround I can think of is to turn off the vertical scrollbar on the browser window completely by using body {overflow-y: hidden;}

However, it's possible that's a bit too radical a measure...