I have a web application that is working perfectly in Chrome and FireFox, yet is crashing in IE. Note, this is not a JavaScript error, but rather the iexplore.exe process actually crashes.
The code is posted below. This will crash in IE9 (when the button is clicked). Reversing the JavaScript or making changes to the CSS may eliminate the issue, but realize that this is reduced code from a much, much larger application that can not be easily changed in this way (for example, in the actual app the two JavaScript commands are called in two different functions - the second one is run conditionally based on the results of the first). I am not even sure what my question is anymore, other than "is there a way to get Microsoft to patch this quickly?" I am interested in hearing people's thoughts:
<!DOCTYPE html>
<html>
<head>
<title>IE Crash</title>
</head>
<body>
<div id="dvStep11" style="width:500px;">
<label for="inpDOB">Date of Birth (mm/dd/yyyy)</label>
<input type="text" id="inpDOB" style="width:350px;" />
</div>
<button onclick="document.getElementById('inpDOB').value = '12/7/1971';document.getElementById('dvStep11').style.display='none';">Click here</button>
</body>
</html>
Edit: I have opened a case with Microsoft and am working on this with a development team member there. I will update this as I receive more information.
Microsoft has confirmed to me that this is a bug in the IE9 rendering engine. From my further research, it has to do with the fact that the width of the parent DIV, combined with the width of the INPUT causes the INPUT to wrap. For some reason, in this case when assigning a value to the INPUT and immediately hiding the parent DIV, IE crashes.
Microsoft suggested I force IE to use the IE8 rendering engine (which does not crash) with this line of code:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
I found, however, that I can also just avoid the problem by wrapping the INPUT in its own unstylized DIV or SPAN. This is preferred because, aside from this bug, the IE9 rendering engine is a lot better (and faster) than IE8's.
Funnily, the debugger IE9 brings is quite useful with break points, variable tracking and such, so I would try and see if that can be of any help. (If you can get IE9; I'm not sure about the dev tools in IE 7 and 8).
Related
I observed that web pages using a lot of JavaScript -- in my case FluentUI controls -- are performing well using iexplore.exe but when I open the same HTML page using a Windows.Forms.WebBrowser component. Performance is much worse.
How can I make WebBrowser as fast as IE?
Steps to reproduce:
Open my test file using IE11
Open dropdown
Dropdown list should appear in a approximately 1 second
Scroll up and down and see immediate reaction
Now open URL http://playground1337.net/dropdown.html in a Windows.Forms.WebBrowser. You can e.g. use this sample WebBrowser program or this one
Open dropdown
It takes about 2-3 seconds until dropdown list appears
Scroll up and down and see how sluggish it feels
This question sounds a lot like this one but the answer is not applicable/needed here. My sample file uses <meta http-equiv="x-ua-compatible" content="IE=edge" > to make the WebBrowser component use the latest rendering engine. The mentioned answer uses FEATURE_BROWSER_EMULATION which has no positive effect when using x-ua-compatible.
By visiting https://html5test.com/ you'll see that both IE11 and WebBrowser get 312 points. So it seems that indeed both are using the same rendering engine. But IE is still faster. Why?
Ideas I had but which I could not confirm:
IE is creating a subprocess using parameter prefetch:2. Is this some kind of optimization?
When scrolling up and down using IE, GPU usage raises by about 10%:
When using the above mentioned WebBrowser programs, GPU usage is very high (70-80%).
Is WebBrowser doing some extra work? Is IE doing some optimizations?
Maybe I can directly embed IE into my application using command line parameter -embedding? Unfortunately when using that parameter there is no visible window.
I'm trying to debug an intermittent, possibly timing-related drawing problem with JavaScript in Internet Explorer (IE9 including in IE8 mode).
Using the Developer Tools, I'm stepping through the lines that create, style, and display elements, but the actual browser window remains unchanged (and shows the Windows "Not Responding" title text much of the time), so I can't see what happens when.
With Firefox and Firebug, I can see the main window update at each step. But regrettably this problem doesn't occur in FF, so I can't debug there.
I've web-searched and looked at the MS articles on using the Developer Tools, but I can't find any discussion about single-stepping through JavaScript and seeing the results of each step. Is something wrong on my system, or is this just not possible?
32-bit IE9 on 64-bit Windows 7, in case that's relevant.
If you are able to step through the javascript code but the browser is not refreshing and crashing your best bet to debug it might be to isolate the problem. Say you are doing five things on a certain piece of code. Reduce that to just one thing and gradually pile up different process on top.
Not sure if this is the answer you are looking, but I have run into similar problem with IE 9 before so if you provide some code snippet which can be replicated I could help you further.
Update
If you are running into intermittent issues with IE make sure to add a meta tag so that IE doesn't load quirks mode after encountering something on your code. Add the following tag. More information here
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
I have been researching all over the internet about this, and unfortunately cannot find out why this is happening. It seems to only be happening in internet explorer 9, on certain computers.
The entire page looks like a mess only in IE 9 (some computers):
The URL of the website is Here
Can anyone tell me why this is happening in IE9?
(NOTE: Compatibility view cleans it, but then the Js/jQuery doesn't work right).
For some reason, IE thought that the site was in my intranet, and rendered it in Compatibility Mode (there's a setting in IE to automatically render intranet sites in CM).
When I unchecked the box to "automatically detect intranet network", the site rendered correctly.
So your real question is how does IE determine the intranet network, and how can you force your page to NOT render in Compatibility Mode... something like this.
I noticed that you have blank space above your doctype. IE hates this. The doctype needs to be the very first thing in the file.
You also have over 2300 HTML validation errors that should be investigated and rectified. Again, IE is very sensitive to invalid HTML.
Going on a whim here, but I think it's the usage of inline-block. I don't have IE9 installed to a point where I can use it's developer console to further inspect, but IE is known to be very bad about displaying inline-block elements.
In Google Chrome's console, I am able to replicate the same appearance using float:left as opposed to display:inline-block, so that should solve that piece of the issue.
Edit: The only syntax issue I see with the HTML is the placement of the </head> tag, which is not adjacent to the <body> tag.
Edit 2: As far as the outlining issue goes, try using this answer to another question.
Edited yet again to fix the display of the tags.
i don't face this problem while working on localhost only when I access the page using the ip address of my system this happens and it only happens with IE!! (works on all other browsers)
by the way i'm using Tomcat V6.0.0.29, IE8
I tried debugging the JS code using IE developer tools debugger, ofcourse when I open using http://localhost:8080/ everything works perfectly fine, but when I use http://myIP:8080/ this loop is giving a problem :-
$('#someId > div').each(function(){...});
As in this loop doesn't run at all, it just kind of skips it. I have checked the IDs they are fine moreover its working in localhost why should it give a problem when I access it using my IP?
Note :-
a. (correction) The problem is only there in IE7, it works perfectly in IE8.
b. As it turns out something weird is happening! i'm using IE8 when i open this webpage using localhost the developer tools shows its working in IE8 standards but when i use the IP address to access this page the developer tools shows its working in IE7 standards. When i changed the standards to IE8 it worked (using the IP address)!
c. But the problem is why the hell is it not working with IE7!! As in everything works except the loop mentioned above.
Finally i came to know what was causing the problem in IE7. Consider the below situation:-
<div id="div1">abc
<div id="div2">def
<div>hjs</div>
<div>zyx</div>
</div>
<div id="div3">xsj
<div>ask</div>
<div>iue</div>
</div>
</div>
The jquery i had written for traversing these divs was something like
$("#divId > div").each(function(){..});
Now for the first level div that is traversing the divs directly inside the div with id "div1" worked perfectly in IE7, but when i did something like:-
$("#div2 > div").each(function(){..});
This worked in all browsers (even in IE8!!) but not in IE7. This is because apparently IE7 requires the exact child selector for divs.
So for IE7 something like this needs to be written:-
$("#div1 > #div2 > div").each(function(){..});
for traversing the divs inside the div with id "div2"
So the problem was cause just by my lack of knowledge about IE7!!
sorry n thanks guys!
The culprit being IE it could turn out something as evil as the browser not caching the page when loaded from localhost, but reading it from cache when using the ip. Make sure you load the page to empty cache from your ip.
Check to see if your script is loaded when using your IP address. Sometimes browsers don't load scripts on special situations (for example when you want to load a script from an http source into an https page). Also you should check IE's security configuration.
To check whether your script is loaded and executed or not, simply put an alert('loaded') statement at the beginning of your code.
This may due to the group policy of your company for forcing Intranet sites using a specific version of IE in compatibility mode. I experienced exactly the same issue when I introducing some IE10+ Javascript libraries to my page.
To work around this you can either ask your company IT for changing the policy or force the browser to not using a compatibility view with the following tag.
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
More details for this tag can be found with the topic below.
StackOverflow - Force IE compatibility mode off using tags
Can someone help me please?
Am working on this page:
http://www.lorealprofessionnel.co.uk/about-us/loreal-professionnel-portfolio
On INTERNET EXPLORER, why I can't see arrows to navigate through the carousel. It works on all others browsers
I have put :
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE[all version here]" />
but nothing !
Actually those elements appear and disappear on Chrome too. When they're invisibile it seems something has given them explicit positions which are fighting with the logic in the original CSS. I can't find where precisely quickly because the page loads over 20 JavaScript files. I have rarely seen so much code to do so little. Screams of corporate CMS. I'm not surprised debugging this is a nightmare.