Table Scroll bar locked in chrome

Question

I have a problem with the table scroll bar only in Google Chrome. Scrolling the table in all other servers works fine, but in chrome, when the scroll bar of the table is displayed, it just fixes, it cannot be moved unless I zoom in the browser window, and then the scroll bar of the table moves.

I have an application here (Open in Google Chrome and another major browser)

In the application, just click the "Add" button until you see a scrolling table. Now in chrome, if you try to scroll the scroll bar of a table, it won’t do it unless you do what I said. Although you opened the application in another browser, the scroll bar of the table works fine.

Has anyone else encountered a problem? Is this part of the code that I have that causes it to not scroll in Google Chrome right away, or is it just the Chrome browser that does it? Is this something I really need to worry about, or if it is a browser error, then should I just leave it?

The application code is in this jsfiddle: http://jsfiddle.net/2SJFt/

If you open the built-in version of jsfiddle: http://jsfiddle.net/2SJFt/embedded/result/ in google chrome and follow the same steps to get the scroll bar appears, then it will scroll right away, but I assume that since technically in jsfiddle, which is why it scrolls right away.

The scroll bar for the table is done by simple css:

#qandatbl_onthefly_container { width:100%; overflow:scroll; max-height:500px; } 

Answer 1

Please do not ask why this should work, but in your var $fileImage , when you write the source of the iframe , put something other than "#", for example, "/". At least this trick worked in my browser.

I’m trying to solve your problem all day, and when I did, everything seems to be beautiful. So your var $fileImage should look like this.

 var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" + "<p class='imagemsg'></p><p class='imagef1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /></p><p class='imagef1_upload_form' align='center'><label>" + "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>" + "<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" + "<label><input type='button' name='imageClear' class='imageClear' value='Clear File'/></label>" + "<input type='hidden' class='numimage' name='numimage' value='" + GetFormImageCount() + "' />" + "</p><p class='imagef1_cancel' align='center'><label>" + "<input type='reset' name='imageCancel' class='imageCancel' value='Cancel' /></label>" + "</p><p class='listImage' align='left'></p>" + "<iframe class='upload_target_image' name='upload_target_image' src='/' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>"); 

Does it really work ?: $