Chrome not displaying Javascript createElement div correctly?

Question

I have the following legacy code creating a popup "autocomplete" box under a form input, using results returned from an AJAX call. This code works fine in Firefox 6 and IE9 - it pops up a little div (styling is what Chrome shows in Developer Tools):

<div id="theDiv" style="position: absolute; left: 0px; top: 21px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: green; border-right-color: green; border-bottom-color: green; border-left-color: green; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-image: initial; background-color: white; z-index: 1; visibility: hidden; "><div style="visibility: visible; ">[...autocomplete text here...]</div></div>

I can see this <div> in FF and IE, but Chrome displays a <div> that appears to be collapsed down to its borders. Oddly, if I set a breakpoint using Developer Tools in the javascript code below at the this.oDiv.style.visibility = "visible"; line, Chrome creates the <div> and shows it with the collapsed-down-to-borders size, but if I switch to the Elements tab in Developer Tools to try to see why, Chrome seems to recalculate something and my <div> suddenly appears and is correctly displayed. If I refresh, things are broken again.

Is this a Chrome bug, or is there something wrong with my code?

The relevant code:

AutoComplete.prototype.onchange = function()
{
    // clear the popup-div.
    while ( this.oDiv.hasChildNodes() )
        this.oDiv.removeChild(this.oDiv.firstChild);

    // get all the matching strings from the AutoCompleteDB
    var aStr = new Array();
    this.db.getStrings("", "", aStr);

    // add each string to the popup-div
    var i, n = aStr.length;
    for ( i = 0; i < n; i++ )
    {
        var iDiv = document.createElement('div');

        var myText = document.createTextNode(aStr[i]);          
        iDiv.appendChild(myText);       

        iDiv.FormName = this.FormName;

        iDiv.onmousedown = AutoComplete.prototype.onDivMouseDown;
        iDiv.onmouseover = AutoComplete.prototype.onDivMouseOver;
        iDiv.onmouseout = AutoComplete.prototype.onDivMouseOut;
        iDiv.AutoComplete = this;
        iDiv.style.visibility = "visible";
        this.oDiv.appendChild(iDiv);

    }
    this.oDiv.style.visibility = "visible";
 }

Answer 1

I am not sure if this is what you need. But I had a similar issue. I was dynamically adding input boxes on my page on a button click event. When the input boxes were not getting added on button click event in Chrome my script tag was as follows :

<script type="text/x-javascript" language="javascript">

Notice that the type is text/x-javascript . And then I changed it to text/javascript and it worked then. I just solved this issue so don't know the difference between the two types.

Answer 2

Looks like "theDiv" is absolutely positioned, so to be absolutely sure :) you need to specify not only its top and left but also right and bottom (or width and height.) Please see this for more details on the element rendering in your case.