Safari CSS Bug: Parent Element Sticky Position
I was searching for an accessible toggling solution the other day (more on that in an upcoming article), when I bumped smack-dab into what appears to be a undocumented Safari bug. I submitted a bug report to Apple (and Quirksmode) already, but I thought I’d try to explain the bug as well as the fix to save you the hours of Googling that I went through. Of course, you’ll receive beTech brownie points if you can explain why it happens (or even correct me).
When changing a parent element’s class via JavaScript/DOM, the initial class’s position:absolute declaration sticks in Safari. The problem is corrected by applying a position:relative declaration to the parent element’s children. Explaining the bug is harder than demonstrating it, so open up Safari and take a look at the examples.
I have just tested the example page you provided and confirmed that it doesn’t work correctly in Safari 2.0.4. The good news is that the development version of WebKit, Safari’s rendering engine, handles all the examples. I encourage you to grab a nightly build of WebKit from http://nightly.webkit.org/ and try it out.
After a bit of digging through the WebKit bug database, it seems as though http://bugzilla.opendarwin.org/show_bug.cgi?id=7095 is the bug you have run into. Simply put, remove the positioning is not forcing the element to relayout. I think your workaround resolves the issue by adding positioning to a child element, which has the effect of forcing layout to occur.
Mark: Thanks for the info and the digging. I did my best to locate a previous record of the bug before posting, but just didn’t have the right search terms (or tenacity it seems). You win the beTech brownie points and a beer whenever you’re in Charlottesville!
-SS