Safari/WebKit background flash on page load

I was recently working on a website that had a black/dark background and while the typical suite of browsers that I test with seemed fine, Safari showed an annoying white flash when the page was loading.

Some research into this lead to a startling discovery as I personally consider this a bug in the Safari browser’s rendering. It’s often referred to as FOUC (Flash of Unstyled Content). There are several methods that I’ve seen, most employ JavaScript or ordering of CSS files to hide the <body> prior to the page completely loading.

The simplest fix, while not elegant, is to an explicit ‘style’ attribute on the <html> tag.

<html style=”background-color:black;”>

Reference:

Adding ‘drop shadows’ to your HTML INPUT fields with CSS

Eventually there comes a time when either you, or your client(s) want you to make your HTML <form>’s sexier… one of the simplest approaches you can take is the addition of a ‘drop-shadow’ to the ‘text’ entry box. One new image and some simple CSS and you’re done!

For the purposes of this article, lets use the image i have here (INPUT white background).

Now for the CSS….
If you’re doing this inline it’ll cause you less trouble if you have a large site and only want this in a few locations.
<input type="text" style="background:#fff url(/images/input_white.png);" value="" />

Now… if you want to put this in an external CSS file you could add a ‘class’ or ‘id’ to this &input> tag, as follows…
<style type="text/css">
input#shadowclass { background:#fff url(/images/input_white.png); }
input.shadowid { background:#fff url(/images/input_white.png); }
</style>
<input type="text" class="shadowclass" name="x1" value="" />
<input type="text" id="shadowid" name="x2" value="" />

NOTE: There are better ways to do the above, but i showed the above to make the implementation obvious.

Now, we can stick the above in an external CSS and use some more specificity to prevent other problems that we’ll elaborate on…

PROBLEM…
If you assign the CSS to the <input> tag itself, you’ll get the undesired background on your CHECKBOX, RADIO, and SUBMIT input types.
The fix… either use a ‘class’ for the cases where you want to apply this style… alternately, apply a ‘class’ for the cases that you don’t want this style.
Future (not well supported currently)… use the ‘type’ in you CSS definition, like so..
input[type='text'] { background:#fff url(/images/input_white.png); }
NOTE: there’s a method in MSIE to use the ‘expression’ concept in your CSS, but i advocate ‘standards’ here, so we won’t delve any further into that topic other than to say it ‘exists’!

So here’s our final approach/recommendation for ‘current’ browsers (in our designs)… you’ll get the shadow ONLY on ‘text’ and ‘password’ input fields and not on the others…

<style type="text/css">
input { background:#fff url(/images/input_white.png); }
input#noshadow { background:transparent; }
</style>
<input type="text" name="x" value="" />
<input type="password" name="p" value="" />
<input type="radio" class="noshadow" name="r" value="" />
<input type="checkbox" class="noshadow" name="c" value="" />
<input type="submit" class="noshadow" name="s" value="" />

WARNING: the background image we use in the example above is only 200px wide, if your text field is larger than that you’ll need to account for it in some way! (otherwise you’ll get a tiled background or run out of ‘shadow’)

More advice…

  1. You can also apply this technique to <textarea> using a similar approach!
  2. This may also be a useful way to indicate ‘errors’, ‘required fields’ or ‘passwords’ in a Rich UI.

Gradient HTML

Provided that all of the ‘buttons’ in your application already use the HTML <button> tag, this is a simple matter to accomplish:
1. Modify your CSS to include the following:

button{background:#eee url(../images/button.png);}

2. Upload the gradient image that you intend to use. (in this example button.png)

3. Done.

For your convenience, the image I use is available here (Gradient Button Background Image)

NOTE: MSIE exhibits some poor caching behaviours when background images are used, look for a post on this elsewhere in my blog.