I have an ASP.NET page that contains an iframe. Inside that iframe, there is a form with a DefaultFocus and a DefaultButton set, as shown below.
<form id="Form1" method="post" runat="server" defaultfocus="txtSearchPhrase" defaultbutton="btnSearch">
When viewing this page in IE11, all of the content inside of the iframe appears to be shifted off the left side of the screen by about 100px or so. This does not happen in any other browser, including IE10.
If I remove the DefaultButton and DefaultFocus from the form, the problem disappears. I can then use Javascript to manually hookup the default button and focus, but since I have many different pages that are potentially rendered inside the iframe, it's not ideal to have to change each and every one of those pages.
Does anyone know what's causing this or if there's a better way to address it?
I looked into this and found some interesting things.
First, when you include DefaultFocus
or DefaultButton
on a form in ASP .NET WebForms, ASP .NET will automatically emit two things:
WebForm_AutoFocus
method.WebForm_AutoFocus('defaultFocusElementID');
It does this for both DefaultFocus
and DefaultButton
settings, though I'm not sure why it needs to do this for the DefaultButton
setting.The WebForm_AutoFocus
method attempts to call the scrollIntoView
method on the element, but only if the browser is detected as a "non MS DOM" browser. Strangely enough, IE11 is not considered an MS DOM browser, at least as far as this method is concerned. So the scrollIntoView
method is designed to run on browsers which are not IE.
I suppose one could argue the bug is with the implementation of the scrollIntoView
method in IE11, but it could also be viewed as a bug in the MS JS library which detects whether the browser is an MS DOM browser. I'm not sure - either way, I blame Microsoft. :)
I recommend not using DefaultFocus
and DefaultButton
from a philosophical perspective because these are Microsoft-specific things, and when you can keep your code away from Microsoft-specific things, you usually should. Especially when using the "Microsoft way" is totally broken. Rather, try something like this (if you're using jQuery):
<form data-defaultfocus="search">
<asp:TextBox ID="search" />
</form>
<script type="text/javascript">
// jQuery on document ready
$(function() {
var form = $('form'),
defaultButtonID,
defaultFocusID;
if (form.data('defaultfocus')) {
defaultFocusID = form.data('defaultfocus');
$('#' + defaultFocusID).focus();
}
if (form.data('defaultbutton')) {
defaultButtonID = form.data('defaultbutton');
form.on('keypress', function(event) {
if (event.keyCode === 13) {
__doPostBack(defaultButtonID, '');
}
});
}
});
</script>
This is not tested code, but you get the idea. Then you can go through and use data-defaultbutton
and data-defaultfocus
on your form elements instead of the Microsofty way of doing it, and it will actually work, and if it doesn't, you can fix it, because you control the code!
I hope this helps.
Update
I found this Microsoft KB article which discusses a .NET 4 patch. Issue 2 on this page appears to address an issue which might be the one you described.
When you access an ASP.NET-based webpage by using Internet Explorer 11, the webpage renders the content incorrectly.
Note This issue occurs because Internet Explorer 11 is not recognized as Internet Explorer by ASP.NET.
I haven't tried it out yet, but it seems like this would fix it.