Opera Mobile incorrectly calculates position: fixe

问题:

I have a interesting problem with position: fixed in Opera Mobile 11:

Test page: http://dl.dropbox.com/u/841468/testcase/opera/fixed.html

The red <div> should stay fixed on top. If I scroll page down, element moves a bit from top edge of viewport (exactly 93px in device pixels); but if I scroll up, element returns to correct position.

(Screenshot on HTC Desire):

My findings:

• Changing zoom level didn't help and didn't change element position from top edge.
• It works correctly in Opera Mobile emulators (both 10.1b and 11)
• Setting or removing "top" / "left" properties didn't help
• Setting "z-index" or "display" properties to some value didn't fixed it
• It shows this behavior even when I move viewport with window.scrollTo(x, y)
• Setting "zoom" to "reset" didn't work
• Mouse events get through this element to element under it (if it is in that incorrect position)
• Trying IE hacks didn't work :)

Thanks

回答1:

This issue has been fixed internally, and the Opera Mobile 11.5 version should roll out with this working correctly.

回答2:

Unfortunately there is no fix for this, it seems to be a known bug at Opera and they are working on it. I worked around this bug by using a little Opera specific CSS hack and putting the div to position absolute in the mean time:

noindex:-o-prefocus, div { position: absolute; }

回答3:

It is a known issue at Opera and we are actively working on a fix. It is though a complex issue involving the painting when rendering.