Problem: SELECT inputs disappear when scrolling a page in IE6

While implementing a design, we ran into a problem in Internet Explorer 6. When you would scroll the document, any <SELECT> inputs on the page would disappear, replaced by the residue of left over screen elements. I'm not a Windows programmer, but from a mechanical standpoint it seems the Windows OS must have to redraw/refresh the graphical interface continually in order to keep user interface pieces where they should live in relation to the window in which they reside. This problem appeared to be that everything else was being redrawn, but not the selects.

Some searching suggested it was a problem in the way IE6 renders the inputs, but that of course doesn't solve the problem. In our case, the culprit turned out to be the use of the gradient filter in the body rule. Here was the rule we were using...

body{ margin: 0px; background-color: #eeeeee; filter:progid:DXImageTransform.Microsoft.Gradient( GradientType=0, StartColorStr='#70dddddd', EndColorStr='#70ffffff'); }

By simply removing the gradient the problem disappeared.

body{ margin: 0px; background-color: #eeeeee; }

I know... the filter made the page look nicer from the graphic designers stand point, but 70% of our traffic can't be "wrong". Sorry, needs of the many outweighed the needs of the one at least this time. Oh yes, and what about getting a W3C endorsed gradient filter?! I agree with the designer... it looks great! (By the time you get around to this it's not going to be "cool" anymore... whatever that means to a nerd like me.)

If you know of other solutions, contact the webmaster. Best wishes.

Keywords: SELECT, input, disappears, IE6, filter, gradient