Safari and JQuery problem with fading in

I was recently working on a site where the client wanted a large image slowly faded in when the page loaded. In the past I might have used flash for this, but thought that the same effect could be achieved these days with javascript -- jquery, to be precise.

And it can, as two minutes reading the docs will show you. It's in theory as simple as doing

$(document).ready(function()
{
$('div#intro').hide();
$('div#intro').fadeIn(3000);
});

This works, but I noticed it gave me a FOUC when viewed in safari (a flash of ugly content). The div would pop up for a microsecond, then vanish, then perform its gentle fadeIn.

I first messed around with trying to hide the div before the document was ready, reasoning that the "hide" call was coming slightly too late. But this appeared to make no difference -- and indeed, if you only call hide() without then calling fadeIn() there is no FOUC problem.

The actual fix (and I've no clear notion why this works, other than that it seems to be a safari bug of some sort) is to add this call to your jquery just before the call to hide():

$('div#intro').css('display','block'); //to cure safari fouc

Yes, I know, the div should already have a block display (my own stylesheet doesn't mess with that). Wiser heads than mine can maybe work out why this makes a difference. But it does, so go figure.

Comments

Post a Comment

Popular posts from this blog

Apple No More?

My trusty Macbook Pro is 8 years old. A bit like the Argo it is arguable if that's entirely true, since the memory has been increased and the HDD has been replaced by an SSD (if you haven't done this I can't emphasis enough how worthwhile an upgrade it is). But the fact remains that it's elderly and things like running an android emulator are getting too much for it. I've been putting off buying a new machine as long as possible though. Gone are the days when I used to lust after the latest model. Apple seem to be deliberately making their machines less appealing to me. This may be age creeping up on me and an accompanying lack of desire to experience new things, but I don't think so (at least, not in this case). Soldered memory and soldered SSD? Memory I can just about cope with; to be honest I don't find a need to use more than 8GB for anything these days. But I get all itchy at the thought of internal storage you can't replace or upgrade. Add to...
Read more

Setting XCode brace options

Just started working with Xcode. I'm old-fashioned and prefer my code blocks to look like this: if (x) { //do something } rather than like this (which is how Xcode defaults to doing things): if (x) { //do something } After a bit of quality time with the big G, I found that this bit of Voodoo (supplied to the Terminal) does the trick: defaults write com.apple.Xcode XCCodeSenseFormattingOptions -dict BlockSeparator "\n" More of these codes are available from Apple's reference docs .
Read more

Delicious Serial

Image
NB Even by the standards of this part-time blog the following post is absurdly obscure. My brother works for a large company who have been in business here since the 1950s. They have a lot of old equipment, and he asked my advice about an elderly PC. It interfaced with some industrial plant and displayed vital statistics about what the machinery was doing. The worry was it might fail one day, and they had no backup or replacement for it. Intrigued, I paid a visit. It turned out to be a Sanyo PC, model number MBC-17LXS. It had a 5.25" floppy disk drive (empty) and interfaced with the plant via a serial cable. The software appeared to be running on DOS, but I couldn't confirm that as they were using the plant that day and didn't want me trying to quit the program. Back home, I did a bit of digging. Not a lot of data on the Sanyo MBC-17LX online but I eventually found this advert in a scanned copy of the August 1990 Popular Electronics magazine: Cool - so the machine was c...
Read more