Question

I have an issue with a table scroll bar in google chrome only. The table scroll in all other borwsers work fine but in chrome when the table scroll bar appears it just locks in position, it cannot be moved unless I alter the zoom of the browser window, then the table scroll bar moves.

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

In the application just keep clicking on the “Add” button until you see a table scroll appear. Now in chrome if you try to scroll the table scroll bar it would not do it unless you do what I have stated. While n the other browser you have opened the app in, the table scroll bar works fine.

Has anyone else encounted an issue with this? Is it a piece of code I have which is causing it to not really perform a scroll in google chrome straight away or is it just the chrome browser itself which is doing this? Is this something I should really worry about or if it is the browser fault then should I just leave it?

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

If you open up the embedded version of the jsfiddle: http://jsfiddle.net/2SJFt/embedded/result/ in google chrome and perform the same steps to get the scroll bar to appear, then it does perform a scroll straight away, but I am assuming that because it is technically in a jsfiddle that, that is why it is performing the scroll straight 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 don’t ask why should it may work but in your var $fileImage when you are writing iframe‘s source put something else other than “#”, for example “/” will do. At least this trick worked on my browser.

I am trying to solve your this problem for the whole day and when I did this, everything seems fine. 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? :$