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.
Related
I know that there already is a question like this: Force IE9 into browser compatibility view
But since adding:
<meta http-equiv="X-UA-Compatible" content="IE=9">
to the the head section and reloading the page with ctrl+F5 didn't help there must be another way.
On my website is also a bxslider and according to this: bxslider not working in IE9 I replaced the elements (which had empty href attribute) with tags - still not effect. The images of the slider are displayed in full size one below the other. After activating compatibility mode the site works perfect.
I don't wanna rebuild my application from the scratch so what could I do to force the compatibility-view? Or is there at least a good free debugging tool for that? I downloaded the firefox addon IE Tab which has a debugbar but to use it you have to buy a premium version. I just don't know what is causing the error...
I found what was causing the error: Why does JavaScript only work after opening developer tools in IE once?
So frustrating and so simple. It was caused by the console.logs in the script. Without them it works like a charm.
If you use this code at the start of your JS (I use it in all my projects) https://gist.githubusercontent.com/elijahmanor/7884984/raw/console-monkey-patch.js it will override the console.log function so you avoid errors in IE but still get logging in modern browsers like chrome.
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 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
After updating Google Chrome browser to the latest 15.0.874.106 version (under Windows 7), my site is experiencing some weird flickering bug.
The text shadows are displaying completely wrong, the text itself is fuzzy and unclear, some parts of code don't work anymore (e.g. right floating, fixed menu)... etc.
For a couple of seconds the site is displayed fine, then it flickers all of the sudden (while still loading) and then the rendering gets messed up. (I think it has maybe some problems with loading of Google Maps v3)
The funny thing is that the old version of Chrome (before updating, on my other computer) is still displaying the site without any problems, and there haven't been any changes in the code in the meanwhile.
In other browsers (as i said, even in the old chrome) everything is OK. Firebug and Chrome's code inspector (CTRL+SHIFT+J) don't show any errors in the code. I have been doing some digging on the Internet and here as well, and I havent't found anything useful.
You can check it out by yourself by clicking here
Thanks in advance.
I have done same settings changes as mentioned above post and now, that weird flicker got stopped, below are the details....
Open Chrome Browser
Click on Settings menu option
Click on Advance setting link in Settings page
Un-Check "Use Hardware acceleration when available" checkbox
Restart you chrome browser
Happy Browsing....... :)
Also make sure to disable not only accelerated-compositing, but also accelerated-2d-canvas.
This is how I start google-chrome on Linux:
/opt/google/chrome/google-chrome %U --user-data-dir=/root --disable-accelerated-compositing --disable-accelerated-2d-canvas
On Windows, you might want to omit
--user-data-dir=/root
Josip Filipović apology where to do that (in Win7 by entering -disable-accelerated-compositing in properties > target field) that part disables hardware acceleration.
We did an application using rails(2.3.4), ruby(1.8.2), MySQL, JavaScript, jQuery. This is handling minimum 6000 records. We showing those records detail in table. In the beginning Mozilla taking 2m to load the whole page. We did the cache, eager loading, indexes. Now Mozilla taking 25s to load the whole page. But IE-7 taking 1m30s to load the page.
We don't know why IE-7 taking too much of time.
Any one can help us to detect the running time in IE-7 and tell your guidelines to improve performance in IE-7.
Any add-on is available in IE7 to see the AJAX request time taken as like Firebug add on.
Use partial loading. Don't try to load the 6000 records at once, load them in smaller segments, when needed. Even 5 second loading is too long, not to mention the 25 seconds or 1m 30s.
Oh and yeah, IE 7's JS engine just sucks.
From Table Rendering - IE Blog:
When Internet Explorer encounters a table it measures all the content
of the table before rendering so that it knows what the widths of the
columns are to render the content correctly. On the other hand Firefox
uses a different algorithm in that it renders the table contents
progressively before it has all been passed.
You can improve performance by setting the CSS rule table-layout: fixed. The renderer will then calculate the layout based on the first row of the table.
IE7 is slow, there's no real way of getting around that basic fact.
I'm going to answer your second question (about debugging tools for IE7) because I don't think I can give any useful advice on your main point about actually speeding up IE7.
Any add-on is available in IE7 to see the AJAX request time taken as like Firebug add on.
The first thing to try is IE8 or IE9. These browsers have a Developer Tools window (accessible via F12, just like Firebug). It isn't as good as Firebug, but it does do quite a bit, and it is a useful debugging tool. It also has a feature which allows you to switch the browser into IE7-compatibility mode. The idea is that you can test IE7 from the relative comforts of IE8 or IE9.
The down side is that it isn't actually IE7. It's just a pretend ID7, and not a particularly good one at that. It may or may not replicate the speed issues you're having with IE7, and it certainly has known bugs and quirks of its own which don't appear either in a real IE7 or in IE8 in normal mode.
But all that said, it might be good enough for you to run some tests and get some answers.
A second suggestion might be to try Firebug Lite. This is a cut-down version of Firebug which runs as a bookmarklet in any browser (but generally IE). It doesn't have all the features of the full version of Firebug, because there's only so much you can do without writing a browser plug-in, but it does do a surprising amount. If nothing else, it does give you the console functions, which can be a life saver for debugging.
I hope that helps.