fix for the opera 9 disappearing content bug

[Example]

Adipiscing elit. Nam interdum. Donec accun, purus ut viverra. Adipiscing elit.

The problem

The red "example" div on the photo randomly disappears or gets trimmed when you scroll down and back up again in Opera 9.

During testing I saw a range of odd effects, including having the div reappear if the content is redrawn (eg. cycle out to another window and back). There are some variations on this situation - at one point I had the example div rendering on load then immediately disappearing again.

Details

The red example div sits below TEST IMAGE in the source order; the positioning is used to pull it up over the image. Both the image and example div are contained inside div set to position: relative; to allow the example div to be manipulated with absolute positioning.

Pretty common approach, really.

[Example]

Adipiscing elit. Nam interdum. Donec accun, purus ut viverra. Adipiscing elit.

The solution

Apply position: relative; to the img ("test image") and all is well.

To recap: container div set to relative, test image set to relative, example div absolute (within the bounds of the container).

Details

It's fixed now. Yay!

End of dummy content (to allow scrolling).

Bug or mistake?

It may be spurious to call this a bug. There are a lot of float and display settings in this layout (I won't bore you with the details, but there are reasons) so there's plenty of scope for error.

That said, this page works ok in IE7, Firefox 2 (PC and Mac) and Safari 2 without the fix applied, so I'm inclined to call this a bug.

In any case, who cares so long as we can fix it, right? :)

Back to post...

disappearing content bug in opera 9 | the 200ok weblog

Back to main page...

the 200ok weblog (main page)