Safari CSS Bug: Element retains position:absolute after class change

The following toggle behavior works with most browsers except Safari. It's intended to simply toggle the class attribute of the target element between "hide" and "show". The CSS of the "hide" class moves the target element out of the document flow to the left of the browser window.

Examples that don't work in Safari

Safari seems to have a sticky position declaration—the position:absolute declaration of the "hide" class holds though the target element's class was changed to "show" via the toggle function. The CSS for the paragraph example below looks like:

.hide {
  position:absolute;
  left:-999px;
  width:999px;
}

Paragraph nested in a div element: [toggle]

paragraph element

Ordered list: [toggle]

  1. ordered list element

Unordered list: [toggle]

Definition list: [toggle]

definition description element

Examples with the Safari fix

A CSS declaration of position:relative applied to the target's child element(s) fixes the problem. The additional CSS for the paragraph example would be:

.hide p {
  position:relative;
}

Paragraph nested in a div element: [toggle]

paragraph element

Ordered list: [toggle]

  1. ordered list element

Unordered list: [toggle]

Definition list: [toggle]

definition description element

Recap

When changing a parent element's class via JavaScript/DOM, the initial class's position:absolute declaration sticks. The problem is corrected by applying a position:relative declaration to the parent element's children. (2006-09-29)

UPDATE (2006-09-30): Mark Rowe spotted the bug on the WebKit bug database: http://bugzilla.opendarwin.org/show_bug.cgi?id=7095.

Return to beTech