Strange IE bug on the first load only; Caused by the "Optimize CSS files" setting

Most of the time turning on "Optimize CSS files" in the performace section of Drupal works great. But, for some reason, having this option turned on was causing the jquery.cycle plugin to break only on the very first load of Internet Explorer. What was happening was that the second image to transition in was being resized to about 50x50px when it should have been something like 900x300px.

Let me tell you, this was a difficult bug to test because after the first load of Internet Explorer on my machine I couldn't test any more. At first I tried using online website screenshot services to test the bug but they also ONLY were only getting the error on the first screenshot. Eventually I had to go to the trusty virtual machine testing approach using Virutal PC loaded with Vista.

As I said earlier, the only thing I had to change was the Optimize CSS files: from Enabled to Disabled under the /admin/settings/performance settings. I wish I would have tried this about 8 hours earlier!

This was one of the strangest bugs I have ever seen as a web developer. It ONLY occured on the VERY first load of IE8 or IE7. All other browsers worked fine and IE worked fine MOST of the time. Even after clearing the cache for IE I could not reproduce the bug. What craziness is IE doing to cause the bug to occur only on the first load. Is there a cache somewhere I don't know about? Maybe it was a race condition error? I never figure it out.

Exact same error here

Hi Dave,

I'am having the exact same problem here; did you find any solutions? Iam not using drupal, but cycle plugin.

Thanks
Peter

Sorry, I never found out why

Sorry, I never found out why this was happening. My only solution was to turn off optimization in Drupal.

same problem

Im haveing the same problem. I am not using drupal tho. Is there any way to so the same thing you did but with only notepad?

In Drupal, Optimize CSS tries

In Drupal, Optimize CSS tries to put all of the CSS files into one file making the browser load faster and also getting around a known IE CSS file limit. To answer your question, there may be something in your CSS that is causing the file to not load correctly on the first load. Are you using a CMS of any kind?

work around

This is old- but in case anyone finds this in a search engine, there is a work around. I had a similar issue with jquery UI not loading its css inside of a lightbox. The workaround is to set preprocessing to FALSE in the drupal_add_css call - e.g.:

drupal_add_css(drupal_get_path('module', 'jquery_ui').'/jquery.ui/themes/base/jquery.ui.all.css','module','all',FALSE);