When you hit it the first time (or do a force refresh for uncached content after the initial page load), the white container that surrounds the page (div class=“wrapper”) is not fully clearing the floated elements that it contains until all items on the page have loaded.
This results in, as you can probably see, a temporary stage in which the background of the contained elements is inherited from the body (the gray color).
What are my options for a CSS workaround to prevent this issue?
I’m going to wager a guess that it’s because the clearing DIV is one of the last child elements. The browser won’t process it until everything above it has been processed first. Try using the clearfix trick instead.
What Jeff said above sounds feasible so is worth a try.
There may also be an issue in #wrapper where you have used a linear gradient for the background and gradients are notoriously slow to render (especially in Firefox) which is the reason I avoid using them and use images instead as I find them quicker and lighter on page usage than gradients.
However, you could try supplying a background-color of #fff on #wrapper before the linear gradient rule so that at least you have a white background while firefox creates the linear background image (which it effectively is).