Search code examples
htmlcss-positionopera-mobile

Opera Mobile incorrectly calculates position: fixed

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):

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

Solution

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