Chrome version 26.0.1410.64
jQuery version 1.7.1
jQueryUI version latest
The web app is created using asp.net webforms
- When the page is at the top, the dialog opens normally and functions correctly. However, if the page is scrolled down and the dialog is dragged, the dialog's top css property increases by the vertical scroll amount. This issue only occurs in Google Chrome.
This code segment shows how the modal popup is opened.
var $dialog = $('<div id="dialogIframe" title="Some title"></div>')
.html('<iframe id="jqueryIframe" style="border: 0px;" src="' + page + '"
width="99%" height="99%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: height,
width: width,
resizable: false,
draggable: true,
buttons: dialog_buttons,
close: function (event, ui) {
$('#dialogIframe').remove();
}
});
$dialog.dialog('open');
- I am troubleshooting someone else's code and unsure of what could be causing this behavior. What could possibly cause this kind of behavior?
EDIT: - The issue is resolved when switching to jQuery version 1.9.1 in Google Chrome, but now the same problem arises in IE9 and the latest version of Firefox (which were working fine with the older jQuery version)
EDIT 2: - I suspect that this problem may be linked to the MaintainScrollPositionOnPostback page property in webforms, which I am struggling to disable or set to false through various methods: on the aspx page, in the code-behind, on the master page, or in the web.config file. It's quite challenging.