Original article is posted here.
As long as I’ve been using CSS to apply styles to my Workflow forms, I’ve had to wrestle (pronounced “rassel” where I’m from) with the FOUC. Here’s a snippet from Wikipedia about this problem:
A flash of unstyled content (FOUC) is an instance where a web page appears briefly with the browser’s default styles prior to loading an external CSS stylesheet, due to the web browser engine rendering the page before all information is retrieved. The page corrects itself as soon as the style rules are loaded and applied; however, the shift is quite visible and distracting.
If you decide to try using CSS to style your Workflow forms, you may eventually run into this problem, especially if you attempt to load in a large data set into a component like a ListSelect.
Before the fix, there is a brief flash of unstyled garbage on my page:
Here is how the page looks after about .25 seconds:
Here’s an easy way to cure this malady.
On the form which contains the offending elements, right-click any empty space on your form canvas and “Edit Form”.
Click to the “Behavior” tab, and scroll to the bottom to find the Script section. Click the ellipsis you find there.
Add the following javascript:
document.documentElement.style.visibility = 'hidden';
Click OK and scroll back up to the Body events. Add an AttributesKeyValuePair.
Add an “onload” event, with the following javascript:
document.documentElement.style.visibility = 'visible';
What this code does is at the very top of the page HTML, it sets the main form element to “hidden”. When the body loads, the javascript there sets the main form element back to “visible”. The “onload” trigger fires after all the CSS is applied.