Fixing tumblr's white flash

Zach Waugh Zach Waugh •

After my recent switch to tumblr, I noticed something odd. Tumblr loads their controls into an iframe in the top right corner of the page. If you're logged in, it will give you some options to follow, like, or reblog. If you're not logged in, it will prompt you to join tumblr. It's not very obtrusive, and I don't mind promoting a product I like and I hope to see succeed. The only problem is when it's loading, the background is white, until it flashes away when the iframe is loaded and then it is transparent. This looks horrible on every site that doesn't have a white background. You can't turn these controls off, so it's always there. You can configure it not to show if the user is not logged in, however, it still has to load the iframe to check if the user is logged in, so you still see the white flash.

I've already fixed it on my site, but here's what it looks like: </embed>

Fortunately, it's fairly trivial to fix this with a little CSS and Javascript. First, in your CSS, set the #tumblr_controls to be hidden: #tumblr_controls { display: none; } This will make sure the iframe isn't showing when the page loads. One caveat, currently "tumblr_controls" is the id of the iframe Tumblr adds. If they change that id, this fix won't work. If you know this is the only iframe you'll ever have on your blog, you could change the #tumblr_controls just to iframe.

Next with jQuery, you can easily tell when the iframe has finished loading, and only then show it, avoiding any flash of white: 

$(document).ready(function()
{
  $('#tumblr_controls').load(function()
  {
    $(this).fadeIn();
  });
});

Here is the fixed version (embedded for convenience though you could refresh and look at the top right corner of this page). This gets rid of the white flash and adds a nice little fade in animation.
</embed>