HTML5 Canvas hosted on Dropbox doesn't work with IE9 - html

Try this link on Firefox or Chrome:
http://dl.dropbox.com/u/34375299/aaa/index.html
Notice a simple animation appears on a HTML5 canvas there.
Load the same link in IE9, and it displays the fallback content inside the canvas tag: "Your browser does not appear to support HTML5..." - but IE9 has perfectly good canvas support!
I'm using <!DOCTYPE html>, and if all the necessary files are downloaded and run in IE9 from disk, it works OK. Also, the same page hosted on other providers (e.g. normal web servers rather than dropbox), it also works OK.
What's different about dropbox that means IE9 won't show a canvas, and can I fix it?

Check to make sure that your IE9 is not in Compatibility Mode, which would force it behave like IE8, which doesn't support canvas. I'm guessing something on the dropbox site is forcing your browser into compatibility mode. See this answer for more details on that... Why does IE9 switch to compatibility mode on my website?

Unsure as to why this is happening, but it is going into IE 9 compatability mode instead of rending in standards mode. You can try forcing it with the following meta element: <meta http-equiv="X-UA-Compatible" content="IE=9" >

Related

How to launch a local html page in IE10 in compatibility mode?

I have a set of old html+JScript pages that are loaded from a local hard drive only. They used to work in previous versions of IE, but IE10 had something changed and it doesn't work anymore. I didn't write the code, so I don't think it's feasible to see what is broken, but it seems to work if I change IE into compatibility mode.
So I was curious, is there a command line parameter to launch IE in compatibility mode without altering the html file itself?
I think you meant to set compatibility settings to IE8, try
<meta http-equiv="X-UA-Compatible" content="IE=8" />
in head tag of html.
Under the Tools Menu bar, click on Compatibility Mode Settings. You can add all the sites where you want to run in compatibility mode there. More info here

How to alter ie Browser Mode?

I found a lot of links that said adding
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
or an older version of DOCTYPE forces the browser into compatibility mode. But after repeated attempts with many combinations, seems to me that all it does is alter the Document Mode and NOT the Browser Mode
I bet if you just remove your DOCTYPE tag completely or make it invalid that IE will be forced into compatibility view. Broken markup of some sorts will force this mode. However, this will surely have other negative consequences for non-IE browsers.
You would like to force IE into compatibility mode?
Also, I don't believe IE will display compatibility mode in the console window.
Are you sure you don't mean quirks mode?
The browser mode function (as I understand it) in IE isn't exactly compatibility mode.
I'm just going to copy/paste from the official documentation below.
Browser Mode
Description
IE9
IE9 reports a UA string, version vector, and document mode to match the default browser behavior, which is the most standards-compliant mode in IE9. Use this mode to test how IE9 users experience your site.
IE9 Compatibility View
IE9 reports a UA string, version vector, and document mode, as if it is IE7; however, the UA string also includes the Trident/5.0 token indicating that the browser is really IE9. Use this mode to test how IE9 users experience your site if they click on the Compatibility View button.
IE8
IE9 reports a UA string, version vector, and document mode as if it is IE8. Use this mode to test how IE8 users experience your site.
IE7
IE9 reports a UA string, version vector, and document mode as if it is IE7. Use this mode to test how IE7 users experience your site.
The only way to force this to change no matter what, is to set it on the virtual directory level through IIS in the 'HTTP Headers' section of the properties menu. Changing it here will force the browser into whatever mode you set it to, 100% of the time.
Changing the setting here overrides whatever browser mode is specified at the web page level.
You can't. The Browser Mode is intended to be used by developers to see what their browser would look like with new features disabled (for instance, if I put my IE10 into the IE8 Browser Mode, it will no longer support border-radius, or anything else that was added).
Since it's a developer tool, there is no need for it on the regular user's side.
The Document Mode, on the other hand, involves how the document is rendered, not how it is supported. I can have my document in IE8 mode and still have rounded corners because the browser mode supports it.
That being said, you should ALWAYS use this:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
If I see a site with a X-UA-Compatible header that contains anything else, I assume that the developer is a lazy bastard.

Emulate IE7 in IE9. What is the default?

I'm currently working on a site that has uses the Emulate IE7 meta tag like this:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
As far as I know and as far as I've googled this tag also addresses IE9, forcing it to go into IE7 compatibility mode.
However I noticed that one of the devs on the project is viewing the page in IE9-mode, not in compatibility mode.
How does this work? Is compatibility mode the default setting in IE9, when the Emulate IE7 meta tag is set? Would one have to manually change a setting in IE9 to bypass the Emulate IE7 meta tag?
The Developer Toolbar in IE9 (and IE8) allows you to change the browser mode-- including forcing display using the IE9 rendering engine.
For more information, read this MSDN article: http://msdn.microsoft.com/library/dd565628(VS.85).aspx#browsermodes

X-UA-Compatible working in developer tools

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
This is a very cool piece of code that forces Chromeframe or latest rendering engine. It can even be sent throught the http headers if you want the html to validate. But with this comes a doubt for me. I use IE8 in compatibility mode to test my websites for IE7 (either clicking the "sheet-of-paper" icon next to the URL box, or by activating "browsing mode" in developer tools). So my question is:
Does compatibility mode still renders webpages as IE7, or does the X-UA instruction blocks my intention?
Im worrying that I think ive checked my pages in IE7 and it turns out what im seeing it's not really what a native IE7 would show....
Thanks for your comments.
Anything you do in developer tools overrides the headers and meta tags. Here's a flowchart which explains it all:
If IE7 compatibility is really important to you, don't use IE7 mode in IE8/9/10 to test it. Use a virtual machine with a native IE7. IE7 mode in IE8/9/10 doesn't behaves exactly the same as a native IE7. What you worry about is true even if Chrome frame isn't installed.

IE9 Support for HTML5 Canvas tag

I am trying to test out the canvas tag, I started with this code:
<html>
<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</html>
In IE8 I get the message:
This text is displayed if your browser does not support HTML5 Canvas.
I then installed IE9 but get the same error. Does IE9 support HTML5 canvas or not?
Edit
The problem was that I was missing the doctype tag
<!DOCTYPE html>
IE9 does support canvas. Here is an exmaple.
If canvas does not work in your browser, press F12 (open developer tools), and make sure, that IE is not in compatibility mode.
Extending the answer from gor, make sure that you have added following metadata.
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
This will force IE to use the latest mode as possible and users don't need to change the compatibility mode from developer tools.
As far as I'm aware HTML 5 Canvas support is under development for IE9, unless it is already in the RC.. Perhaps not the best website to find out you could browse to html5test with IE9 to see if it supports certain HTML 5 tags or not. As an alternative you can browse to caniuse which should also give you alot of info regarding the HTML5 support of browsers .
Just an add on to this there's a little script I've been using called excanvas that has allowed me to run canvas animations (slowly) on IE8, haven't tried it on 7 and 6 but it's worth a look.
If you install the Google Chrome Frame Plugin [http://www.google.com/chromeframe][1], it upgrades IE6-9 to run the webkit rendering engine - along with HTML5/CSS3 support.