disappearing content bug in opera 9
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.
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 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.
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.