IE-Edge Compatible mode issue with AngularJS - angularjs

My AngularJS Web application is working fine in dev environment as expected once its deployed to higher environment . While running/browsing the application in IE Edge the application by default selecting the 8 and my application is not working since IE 8 wont support AngularJS.
So tried changing the meta tag to override the compatible view setting in my code as follows
Trial 1
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Here in the place of the content I tried with all possible options like
IE=edge,11,EmulateIE11,10,EmulateIE10,9,EmulateIE9
Trial 2
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="IE=edge" />
</customHeaders>
</httpProtocol>
</system.webServer>
I tried in all possible ways but while browsing the application by default it is selecting the IE mode 8 and application not working.
Note:
It's an intranet site with compatible settings enabled in IE. Before upgrading to IE from 10 to 11, the application was up and running correctly without any override compatibility code.
My hosted environment has compatible view settings by default so am trying to override default setting by above trials but no luck. In the Fiddler HTTP response header I can see the X-UA-Compatible edge and in view source I can see:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
FYI
https://github.com/MicrosoftEdge/MicrosoftEdgeLauncher/issues/14

I was experiencing this issue yesterday. Browsed about it for quite sometime why it was occurring. It worked good when tested with my localhost application server, but when I moved it to the server machine for intranet access, it started getting distorted in IE. I realized that whenever IE is being launched, it's launched in compatibility mode IE7 by default for all the intranet pages.
Tried with <meta http-equiv="X-UA-Compatible" content="IE=edge"> as the first meta tag and it worked for me.
I am glad to see that you got it worked out by getting the group policy settings updated.

Related

Mathjax displays math formula as normal text in Microsoft Edge browser

One of the user reported an issue that math formulas are not displaying correctly. I checked that he is using Microsoft Edge browser. What will be the cause for this and any workaround for it.
In Microsoft Edge
In Chrome
We strongly suggest to follow Microsoft’s suggestion to use IE=edge. That is, in the document <head> include
<meta http-equiv="X-UA-Compatible" content="IE=edge">
before any other tags in the . This will force all IE versions to use their latest engine which is the optimal setting for mathjax.

Responsive Site Not Working

I recently launched a site I was working on and with a responsive theme, but it displays the desktop version on cellular devices. It works properly on my staging site, but after migration, the live site does not display properly.
Live Site: http://www.sterlinganalytics.com
Stage Site: http://stage.sterlinganalytics.com
I have already cleared the cache and got the same result.
Unless I missed it, I believe you are missing the responsive meta tag on the live site:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Angular Routing not working in Internet Explorer

I am currently using routeProvider to load a partial in the usually way. This works in Chrome, however, this does not work in Internet Explorer 11.
The links are in the form href="#/routehere", and it works when I manually paste the URL into the browser, but not when I click on the links.
What is going on here?
if you have missed this one
<html xmlns:ng="http://angularjs.org"> # Angular Docs says
OR you may try adding this to the header
<meta http-equiv="X-UA-Compatible" content="IE=8">

meta tag viewport content width and initial scale having issues

I am developing a webapp using angularjs. The webapp loads perfectly fine when the mobile device language is set to any except Chinese. I debugged a lot and found the issue that the web app is not loading because of the meta view port tag in the index.html. As soon as I remove the width and initial scale from meta viewport tag, the web app loads successfully in the mobile when the language is set to Chinese. navigator.language = "zh-CN" May I know the reason why this is creating problem when navigator.language is set to Chinese ? Is there any other alternate solution to make my webapp working?
Having the below meta tag in the index.html, doesn't render my app properly if language is set to Chinese
But if I remove the width and initial-scale, then the app renders properly if language is Chinese.
<meta name="viewport" content="maximum-scale=1.0, user-scalable=no, minimal-ui"/>.
I also tired a sample app, but the issue is observed there as well. Please see below my index.html where you can easily reproduce the issue in any Android phone. I tried in my S3 and also in a S4 device . Please help me on this issue. You can copy the below index.html and load it in your apache server to see the issue. The moment you remove the width and initial-scale from the DOM element, you can see the app loads perfectly.
Please help on this issue
Instead of setting initial-scale and/or user-scalable, try combining a minimum and maximum scale. For example:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
You don't need to use minimal-ui. Apple dropped support for this in iOS8.
It's never a good idea to set maximum-scale nor to set user-scalable="no" because it stops people from being able to zoom, which they may need to do.
It would be interesting to see what happens when you remove these and simply use the viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I cannot see how the language would be causing this to happen, but it clearly is occurring, it sounds like a very interesting edge case.
Have you also tried other Chinese related lang settings such as "zh" or "zh-Hans"?
I also wonder if it's related to the font, and thus related to this question?

IE8 AngularJS Page Load Lag + ng-bind-html issue

For context, I work in an environment where I still need to support IE8 (still the default distribution on computers); I am also using twitter bootstrap 3; Angular is latest version. I am returning data from APIs and using ng-repeat to build the results in the view. Anyone out there developing applications in IE8 land? All my stuff is working stellar in Chrome.
I have 2 problems.
One is that in IE8, loading of the ng-repeat-driven API results takes forever or never finishes. If I open developer tools in IE8 and debug, on the refresh it loads the ng-repeat results fine. This happens every time.
Here's the beginning of my :
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
I have no idea why that is happening. Should I be using a different tag? I am wondering if IE8 Developer Tools loads items in a different IE8 mode than I have in the head. I am not clear on how I check the status of the API response in IE8 to verify that it is not a problem with the API call going out, rather than a problem of angular rendering the response.
The other issue is the ng-bind-html is not returning any values from certain fields of my API response in IE8. Working fine in Chrome. Is this a true alternative to ng-bind-html, and one that will work in IE8?
Since Stack Overflow won't let me answer or upvote the answer I found...This provides the solution to the ng-bind-html. Wasn't clear how you could apply that via a filter until I saw the answer that was not selected.
As for the other issue, I am going to go the route of an API call that does not include a data body (the API I am using can have the data come multiple ways). Case closed (in so much as I can move on...still plenty of unanswered questions.).

Resources