AngularJS and quirks mode: blank screen on IE8+ - angularjs

I'm working on an Angular project that will be included in a HTML page I don't have control on.
Actually I only have access to what is inside the <body> element.
There are many constraints which are not the easiest to deal with:
1- I can't change the doctype:
2- I can't remove this meta tag:
3- The app has to load an XML file
I managed to overcome points 1 and 3 but point 2 gives me a headache !
Here is the error I get when I test on IE8+ (it works fine on IE7 and other browsers):
[$sce:iequirks] http://errors.angularjs.org/1.2.12/$sce/iequirks
IE8 in quirks mode is unsupported
error in component $sce
Strict Contextual Escaping does not support Internet Explorer version < 9 in quirks mode. You can fix this by adding the text to the top of your HTML document. See http://docs.angularjs.org/api/ng.$sce for more information.
I found many solutions on forums but no one has worked so far...
Especially hoped that disabling $sceProvider (code below) would make the app work on IE8+ but it didn't:
angular.module('ie7support', []).config(function($sceProvider) {
// Completely disable SCE to support IE7.
$sceProvider.enabled(false);`
});
I even tried to add <!doctype html> to the top of my HTML document, which I am not allowed to but which I did just for the test, and it doesn't solve the problem.
Any help or suggestions greatly appreciated cause I'm really stuck right now...
Thanks

Got it !!
I simply needed to give the name of my app instead of silly "ie7support" in the code below:
angular.module('ie7support', []).config(function($sceProvider) {
// Completely disable SCE to support IE7.
$sceProvider.enabled(false);
});
Found thanks to a deeper look at this article:
http://docs.angularjs.org/api/ng.$sce
Hope it can help some of you !

IE in quirks mode is not supported by AngularJS

Thanks for your answer Adam but according to these messages, disabling $sce completely helps AngularJS to support IE in quirks mode...
https://github.com/angular/angular.js/issues/3633
[$sce:iequirks] Strict Contextual Escaping does not support Internet Explorer version < 9 in quirks mode

Related

IE 11 Placeholder text missing

I'm having an issue with placeholder text not appearing in IE 11 when utilizing AngularJS. It shows up on every other browser and I haven't modified any CSS to change the appearance of it. I have even disabled all stylesheets and still can't get them to appear. See image below.
If I visit other sites that utilize placeholders within input fields - I have no issues. I'm a bit stumped in terms of resolving the issue. Any ideas?
$(document).ready(function(){
// IE workaround to show placeholder
$(element).placeholder();
})
So it seems I found my issue and also have a solution to follow up. Prior to this I was having compatibility issues with Angular running in specific version of IE and had force compatibility to IE 9 inserting this in the head of my HTML:
<meta http-equiv="X-UA-Compatible" content="IE=9">
I then proceeded to utilize this angular directive https://github.com/cvn/angular-shims-placeholder. It didn't work right off the bat but after scratching my head some more, I realized it may be a caching issue and upon clearing it out, I now have placeholders within my inputs in IE!

Why I don't see update of my angular project with firefox?

I took the hot towel template from John Papa's blog and running it with VS 2013.
So, I am working on the apps, but wierdly, I don't see the updates of my project, when I run it with firefox (lastest version), but it works well with Internet explorer (also lastest version). And I don't understand why.
Even a little update in an html file, is not visible in Firefox, but it is in IE.
Does somebody have any explanations to this?
I am not sure if this is the right stack overflow section for this question, if it is not, I will delete it, and rewrite it into the right one.
Thank you.
Have you tried to reload the page ?
If it works free the cache after each update.
I hope my answer fit you.
Try using Firebug, make sure your html file is getting loaded, also disable browser caching. Don't forget to reload the entire page after any updates.
If / when you have success pls post your solution.

textAngular pasting in IE not working

I'm using textAngular as a WYSIWYG text editor in an angular app. It is a fantastic library that is essentially plug and play. It works perfectly in Chrome and Firefox.
The problem is when I attempt to paste some text into the textAngular window in IE it simply doesn't work. It doesn't raise any console events, throw any exceptions or anything. On the network, it calls 4 URLs, which are then all aborted. They are:
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css
http://fonts.googleapis.com/css?family=Roboto:400,300
http://www.textangular.com/css/style.css
This network activity does not happen in Chrome and Firefox. So, I think that is where the problem is. But for the life of me I can't figure out what is going on. It doesn't look like this problem has been reported to the textAngular team or has been asked on stack overflow.
Does anyone have an I idea of how I can remedy the situation?
Edit:
Here is a plunk replicating the situation. It is the demo from the github repo, almost verbatim (the link to the textAngular links were dead, and I got ride of the initial text). I'm pretty sure that it is just a problem within the 1.2.2 library and I'm going to report a bug. The version on the main page is 1.2.0. Thanks for you help!
I tested your solution on IE 8,9,10 & 11 without any issues. I did however notice it the page was not formatting correctly no IE. It could be an issue with escape characters.
If you could provide some more details about your system, for example: IE version, the code you tried to paste etc. I think I may be able to sort this one out.

How to make new Zurb Foundation support for IE 7+?

I recently build an responsive website. I use Zurb Foundation because some advice and article its the best solution for make responsive website more efficient. But the problem, the new version of Foundation don't support for IE 7+, as you can see here, but I want my website support for all of IE version. Some suggest advice to use old Foundation (i.e. vers 3). But I think the newest version is the best.
My question, any solution to make new Foundation (vers. 4) support for IE?
I need the advice because I'm stack here. Thank you
The problem with IE7 and IE8 is that they don't have built in support for media queries.
There are some options which may help you though, cross-browser polyfills that add media query support to old browsers.
The two most popular are respond.js and css3-mediaqueries.js . I've had success with both.
In the head of your page, you test the browser and load one of these scripts if necessary.
Ways I've done this in the past are either with conditional comments:
<!--[if (lt IE 9) & (!IEMobile)]>
<script src="path-to/respond.js"></script>
<![endif]-->
or by using modernizr
Modernizr.load([
{
// The test: does the browser understand Media Queries?
test : Modernizr.mq('only all'),
// If not, load the respond.js file
nope : '/js/respond.js'
}
]);
Both methods are easy enough to try, and even if though don't help you this specific case, you'll probably get the opportunity to try them again on another site.
Good luck!
I wrote this http://justthisguy.co.uk/responsive-sass-and-ie/ that looks at using bootstrap and having sass generate an ie7 stylesheet that defaults to the desktop view. I'm going to work on a foundation version of it at some point. It results in some duplication of css rules but something like https://github.com/addyosmani/grunt-uncss could be used to remove that duplication

internet explorer 6/7

I have recently developed a couple of websites for a local vets and car valeter which look fine in internet explorer 9 and firefox but when viewed in internet explorer 6 or 7 it just goes wrong
In the car valeting all the boxes move down so they do not run as i have placed them (this only happens in IE6 not 7
in the vets website there is a lot of whitespace at the bottom of quite a few pages before you reach the footer. I know IE6 and IE7 are outdated but I would still like to fix the errors if possible.
Thank you for your help.
Dont forget the doctype on the top of your html file, otherwise the browser will
work in quirks mode instead of compatibility mode. Might solve your issue. Also no one uses IE 6 anymore, do not bother
check your site with the w3c validator and fix qny errors nd warnings, besides that there isnt much you can do
A helpful approach would be to use frameworks for JavaScript (jQuery) and CSS (BluePrint) for cross browser compatibility. It will take time to migrate to new coding, but will be worth it.
On a side note, if you do not mind redirecting the users of IE 6/7 to a page suggesting they upgrade their browsers, then you may try something like this in your JS:
var browserVer=parseInt(navigator.appVersion);
var browserName=navigator.appName;
if((browserName=="Microsoft Internet Explorer" && browserVer<=6) || (browserName=="Netscape" && browserVer<=3))
window.location="Incompatible.html";
Where 'Incompatible' is the page where you want to redirect. Also if you use above as a function, make sure you call it:
<body onLoad=yourFunction()>

Resources