Opera and fancy positioning just do not mix.

 

Despite the fact that Opera actually scores higher on the acid3 test than most other leading browsers, it really struggles with absolute & fixed positioning, especially in a dynamic context. As some of you may remember, in the past I discovered buggy behavior with absolute positioned items not properly filling their specified widths/heights - well, now I have found another frustrating one in Opera - this time with fixed positioning.

 

First a little background:

 

Fixed positioning, for those of you who are unaware, is the "magical" little way you can get elements to stick to certain areas of the browser. You see this all the time with notifiers popping up in the bottom corner that stick to that corner even as you scroll. Fixed positioning can also be used for floating a menu at the top or bottom of the browser window (or anywhere else for that matter). Simply put, it is basically saying that the "fixed" items are stuck to the specified coordinates (of the browser's viewport). This differs from absolute positioning, which means the items are positioned relative to the first parent positioned as "relative".

 

Now what I've been doing is very straight forward: I hide a menu off-screen, by setting it's right position to be the same number of pixels (only as a negative value) as the item's width. This prevents any part of the element from showing as it is fixed to an area of the viewport that is not visible (ironic, much - eh?) That way, when I want to show the menu, I animate it in by using jQuery's animate method (by setting the new right position to 0 - so that it starts at the beginning of the viewport and is displayed).

 

And that's it - that is where it all goes to hell in Opera!

 

What happens in every other browser is just what you'd expect - the element isn't seen initially, but once you animate it in, it is viewable as desired (tested to work in Firefox, Chrome & even IE). What happens in Opera blows me away - the element isn't seen once animated in.

 

However, if you minimize the Opera browser window (or even just maximize or re-size the window), it magically just APPEARS!

 

Amazingly, this does *not* seem to happen in Opera if you make the element absolute positioned instead of fixed positioned.

 

See it in action:

 

You can see the blunder in action here:

 

http://sikosoft.net/opera/fixed/fixed.html

 

I've tested this with Opera 10.63, so this is quite an up-to-date version. Try it in any other browser and you'll easily make the distinction.