Hi everybody,
I am having a problem in Safari 3 running on Windows 2000. I can't say if this behaviour is the same in previous browser versions or on other operating systems, but it is consistently occurring under the circumstances that I previously described. The problem is very simple: When you add Options to a dropdown select element ( using JavaScript ), after having already viewed the items, the list will resize accordingly, but the new area will be all black!
Below is the web page code. It explains how to reproduce the bug. I noticed that it does not happen with multi-line selects ( size is greater than 1 ). I experimented with switching the size up and back down again to force a refresh but that was unsatisfactory. I have posted the bug on the Safari bug page, but if anyone can suggest a fairly easy workaround for the time being, I would be very grateful.
Thanks,
Rob G
Code follows:
<html>
<head>
<title>Repaint Issue with Dynamic Options in Dropdown Selects</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
<div align="center">
<h2>Repaint Issue with Dynamic Options in Dropdown Selects</h2>
</div>
<h3 align="center">In Safari 3.0.3 (522.15.5) running on Windows 2000 </h3>
<p><b>Instructions:</b></p
>
<ol>
<li>Click on the list to open it.</li>
<li>Click the button, which will add more options.</li>
<li>Click on the list again to view the items. There will be black all around
the previous options.</li>
</ol>
<p>Email me at rob@robgravelle.com for more information or to suggest possible solutions.</p>
<h3 align="left">
<p> </p>
<script language="JavaScript">
var btnClicked = false;
function addOptions( list )
{
for (var i=list.options.length; i<10; i++)
{
list.options[i] = new Option("New Item " + i, "");
}
}
</script>
</h3>
<form name="form1" method="post" action="">
<p align="center">
<select name="select">
<option>item 1</option>
<option>item 2</option>
<option>item 3</option>
</select>
</p>
<br>
<br>
<br>
<br>
<p align="center">
<input type="button" name="Button" onclick="addOptions(this.f
orm.select
);" value="Button">
</p>
</form>
<h3 align="center"> </h3>
</body>
</html>
Start Free Trial
