sIFR.useStyleCheck weirdness in Safari 4 and Opera

Question

So, I'm using sIFR (version 3, revision 436) to replace elements in my navigation, and everything is beautiful. But when I turn on sIFR.useStyleCheck to detect the CSS load, everything goes wonky in Safari 4. By wonky, I mean that it seems like the inserted dummy div lingers with its 42px left margin, and it throws off the sIFR'd text so that it's not in the correct horizontal position or doesn't wrap when it's supposed to, etc. I also get a horizontal scroll bar in my browser window, which is always fun. But, if I resize the browser window, everything repaints and is fine again.

I know this doesn't happen in Firefox. It does appear to affect Opera. Haven't tested in Safari 3 yet. God knows what will happen when I fire it up in IE, but I'm guessing it'll actually be OK, since Mark (Wubben) says that the sIFR.useStyleCheck is mainly to improve performance in Safari and Opera.

Any suggestions? I looked for a way to force a repaint, but couldn't figure it out. It would not be a very elegant solution though if I did.

Answer 1

For anyone who cares, I figured out that the problem was that my sIFR.css was loading before my typography.css. The reason it mattered was because when you use sIFR.useStyleCheck, sIFR waits to do any replacements until it detects that the dummy div it inserts has a margin-left of 42px. The 42px margin is of course set by sIFR.css. Once the 42px left margin is detected, then sIFR goes about happily replacing your text, even if the rest of your CSS that instructs how the text is positioned/styled in the first place hasn't loaded yet. Once the replacements are made, then your typography.css doesn't budge 'em -- unless you resize the browser window and sIFR repaints.

So my first guess that the dummy div was somehow throwing things off was not it at all. The dummy div is successfully removed and doesn't change anything.

What was interesting was that different browsers handle the CSS differently. It's apparent that Firefox must process all the CSS before letting on to sIFR how the dummy div is styled. But for Opera and Safari, it's critical that the CSS load in the right order because sIFR gets wind of the styling as it happens. So, this fixed the "weirdness" described above in Safari and Opera, but I'm still having some mysterious styling issues in Opera … but that's another story.