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.
document.documentElement.style.visibility = 'hidden';
Click OK and scroll back up to the Body events. Add an AttributesKeyValuePair.
document.documentElement.style.visibility = 'visible';