Tuesday, April 5, 2011

CSS Causing a Crash on Webkit Browsers

This absolutely blew my mind today. Turns out a piece of CSS code can cause a 30 second pinwheel and/or crash in Safari and Chrome on a Mac. This is extra crazy, because it works fine on all browsers on a PC, including IE6. At first I thought it was an issue with my JavaScript code or something wrong with JQuery, but after spending a whole boat load of hours on this problem, turns out the culprit was 1 line CSS.

The following line caused crashes and freezes for me: background-size: 100%;

This was set on a div in a code that I inherited.
div.searchFilter {
 background: #FFFFFF url(../images/search_options_bg.png) 0 0 repeat-x;
 width: 762px;
 margin-top: 0;
 display: none;
 border: 1px solid #b6ac9f;
}

I hope this saves someone some agony, because it drove me insane.