the 200ok weblog

This is one for the "if you fix a problem, blog it" files.

I've been having a problem with a particular feature on a page I'm building at the moment. Basically I need to position a small div over the top of an image. The image can then change without needing to edit the content in the div.

To do it, I set the size of the container div then used absolute positioning to place the small div where I wanted it within those boundaries. To get it all to work the container is set to position: relative; and the small div is set to position: absolute; - something which is pretty common.

the problem

Screenshot 1: Desired result (and before scrolling in Opera 9).

Screenshot 2: After scrolling down and back in Opera, content disappears. The exact result varies; with other combinations of positioning the example div may also disappear immediately after the page loads (that is, it renders then disappears).

The problem occurs in Opera 9 on both PC and Mac. To see this in action, check out the example page.

the scenario

The large image and the red example div are enclosed in a container div. Initially, the container div was set to position: relative;; the red example div was set to position: absolute; and the large image had no specific setting.

the fix

To fix the problem in Opera, apply position: relative; to the large image as well. Some more testing is required to be sure, but I think the principle is to make sure there aren't any elements without explicitly handled positioning.

Again, see the example page for the real thing.

Update 2008.08.13: This bug does seem to be fixed in Opera 9.5x. Hurrah! :)

Labels: bug, disappearing content, opera, opera 9, problem