Support IE 9

[GoogleCodeExporter]

SVG Web should use the native SVG support in IE 9 instead of Flash. Steps to 
achieve this:

* Separate out all feature and browser hack checks into separate Features and 
Hacks classes that take these checks out of the main code (Issue 572)
* Our IE conditional hack for embedding objects doesn't work great for IE 9. 
Replace this by using something closer to what Flash uses for embedding objects:
<object>
  <embed></embed>
</object>
(Issue 132)
* Make sure that the demos and unit tests work.

Original issue reported on code.google.com by bradneub...@gmail.com on 16 Nov 2010 at 9:42

[GoogleCodeExporter]

Issue 554 has been merged into this issue.

Original comment by bradneub...@gmail.com on 16 Nov 2010 at 9:43

[GoogleCodeExporter]

When fixed, make sure issue 559 is also fixed due to IE 9 fixes.

Original comment by bradneub...@gmail.com on 16 Nov 2010 at 10:04

[GoogleCodeExporter]

Currently, IE 9 will not work at all with SVG Web due to some new problems with 
IE 9.

I want to point a workaround for some folks. If you just want the flash mode to 
work with IE 9 you can add the following tag to your HTML page:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

The downside to this tag, as far as I understand it, is that IE 9 features, 
including native SVG, and bug fixes, are not available. It makes the browser 
act like IE 8.

Note that IE 9 is in Beta and Microsoft's web site steers you into an IE 8 
upgrade now. Previously I think it installed a separate "test drive" IE 9 
alongside IE 8, but I can no longer find that option on the web site.

Original comment by grick23@gmail.com on 4 Dec 2010 at 10:06

[GoogleCodeExporter]

on this page you can decide for yourself if you want ie9beta (which replaces 
ie8) OR the seventh platform preview of ie9 which gives you the latest 
rendering and javascript engine but no chrome and your original ie8 
installation will remain intact.

http://ie.microsoft.com/testdrive/info/downloads/Default.html

Original comment by mneu...@gmail.com on 4 Dec 2010 at 11:16

[GoogleCodeExporter]

Thanks Michael, I was hoping there was a way to get to the preview.
I have a new machine to work with but I ended up with the Beta which seems to 
be older than the preview now.

Note my comments about the IE 9 problems refers to the IE 9 beta. I had the 
preview on a different machine which seemed to fix some problems as you 
mentioned before. I don't think they are all fixed but I am going to try to 
work it out. There are some SVG Web examples that seem to work fine so there is 
hope that there are narrow problem(s) can be isolated and hopefully avoided or 
fixed, before IE 9 ships. The worst case scenario is a broken flash/javascript 
bridge which does not get fixed...

Original comment by grick23@gmail.com on 4 Dec 2010 at 11:44

[GoogleCodeExporter]

I fixed a few critical problems with IE 9 support in r1270.

The standard demo seems to work for the most part in flash mode. 

There are a couple of files that did not work like ones with video or 
scripting. The scripting (blocks game) problems are probably specific to IE9 
but I have noticed problems with the video examples before, outside of IE 9 so 
that needs more testing.

Scripting does work for the most part on IE 9, but the blocks game currently 
throws an exception at svg.js line 428: doc.setProperty('SelectionLanguage', 
'XPath')

I have done nothing about IE 9 native support and it is an open question as to 
whether SVG Web should default to native support on IE 9, assuming that can be 
made to work.

Original comment by grick23@gmail.com on 7 Dec 2010 at 6:50

• Changed state: Started

[GoogleCodeExporter]

Note that I was incorrect about scripting working in flash mode in IE 9 as of 
r1270. I accidentally left a meta tag in my test content. It was really not 
working at all.

I had a number of problems getting scripting to work on IE 9. I had problems 
with IE 9 standard XML objects as well as the HTC behaviors. So I tried a 
technique that I developed a few months ago when I was doing some performance 
research. I used a DIV shim instead of an HTC shim and I used 
Object.defineProperty (which became available in IE 8) instead to define the 
accessor properties.

So scripting in flash mode is fixed as of r1273 for IE 9!

r1273:
Issue 573; Support IE 9 scripting in flash mode by using a DIV shim with
Object.defineProperty used to implement the accessor properties.
Since this uses feature detection (looking for the presence of
Object.defineProperty directly), IE 8 will also use its existing
Object.defineProperty method, instead of using HTC nodes. IE 6 and 7 will
continue to use HTC nodes because they do not support Object.defineProperty.

This is a significant change and should get some testing before released or 
used in production. I ran the browser tests and some of my own tests which 
seemed to work. Blocks game works on IE 9 for the first time which is a good 
litmus test.

So, IE 9 flash mode overall is in pretty good shape and I consider that 
finished unless bugs surface.

Native support remains unsupported but is probably the next thing I will look 
at. Assuming that can be made to work, I will make native mode the default mode 
for IE 9.

Of course, until then, the ultimate workaround exists for IE 9, and any other 
browser that you want to run in native mode: simply remove SVG Web from your 
content on the server side. I understand that is a hassle for some because it 
may not fit into your work flow (and see Issue 360) and so I am not suggesting 
this for everyone, but if you do not need SVG Web and can remove it from your 
web page, it will save you download bandwidth and page rendering time.

Original comment by grick23@gmail.com on 12 Dec 2010 at 9:17

[GoogleCodeExporter]

Using r1273 in IE9beta with Flash 10.1.102.64 my mapping examples won't display 
at all and I get 

SCRIPT5022: Unable to parse SVG: A name contained an invalid character.
svg.js line 555 char 7

throw new Error('Unable to parse SVG: ' + e.message);

with the platformPreview7 again nothing is displayed but I somehow didn't get 
any error in the script debugger

Original comment by mneu...@gmail.com on 13 Dec 2010 at 6:45

[GoogleCodeExporter]

r1274 should fix the mapping example.

Original comment by grick23@gmail.com on 14 Dec 2010 at 5:13

[GoogleCodeExporter]

The issue is, it works fine with Flash forcing by means of the meta tag

<meta name="svg.render.forceflash" content="true">

but doesn't work with the forced Flash via

../atlas.html?svg.render.forceflash=true

tested in IE9 Preview 7

Not sure though if that is my fault as the maps take other parameters after the 
question mark, which sofar has been worked fine.

Original comment by mneu...@gmail.com on 14 Dec 2010 at 7:00

[GoogleCodeExporter]

I am attaching a patch and example html I produced for the IE9 pre release 4 
back at the end of 08/2010.  I sent it to bneuberg at the time and it still had 
a number of issues left to be resolved, but it might be helpful to someone.

Original comment by bduncan%...@gtempaccount.com on 15 Dec 2010 at 7:18

Attachments:

• svg.js.ie9pre4.patch
• example.ie9pre4.html

[GoogleCodeExporter]

Additional fixes for native mode in r1275.

Dynamically adding an svg as an object element does not work. Sample file 
samples/javascript-samples/svg_object_dynamic_add.html demonstrates the 
problem. This appears to fail in native IE 9 even when SVG Web is removed and 
standard DOM methods are called.

Other than the problem above, IE 9 support is ready for testing.

Original comment by grick23@gmail.com on 17 Dec 2010 at 7:28

[GoogleCodeExporter]

This looks very good, in-depth testing still in progress. Just a quick reminder 
for people who didn't follow all the discussion threads:

To offer native IE9 support the object inclusion syntax has to be changed from 
the one shown in the manual as follows

<!--[if lt IE 9]>
<object id="testSVG" src="scimitar.svg"
        classid="image/svg+xml" width="1250" height="750">
<![endif]-->
<!--[if (!IE)|(gte IE 9)]><!-- -->
<object id="testSVG" data="scimitar.svg"
        type="image/svg+xml" width="1250" height="750">
<!--<![endif]-->
</object>

Original comment by mneu...@gmail.com on 17 Dec 2010 at 7:24

[GoogleCodeExporter]

Thanks Michael. I wanted it to get some testing before changing the manual and 
examples, but I'll do that soon.

Original comment by grick23@gmail.com on 17 Dec 2010 at 7:42

[GoogleCodeExporter]

I somehow get an xlinked jpg background image not to load in IE9 native 
(preview 7) with r1275, only the "missing image symbol" is displayed (see 
attached screenshots):

<div id="map">
<script type="image/svg+xml">

<svg width="100%" height="100%" viewBox="2484473 -5831574 260229 261409" 
id="svgroot" style="background-color:#ffffff; display: block">

<g id="electoralBoundaries">

<image xlink:href="topo_map_background.jpg" id="topoBmp" x="2481555" 
y="-5831574" width="266065.12" height="261409"/>

<g 
transform="matrix(0.99462955,0.01581698,-0.01573398,0.99987629,-77618.189,-40752
.216)"
     style="fill:none;stroke:#333333;stroke-width:100;" id="polygons" opacity="0">

<path d="m 2504080,-5635079 ...
<path d="m 2510944,-5628678 ...

Same code works well in IE7/8 and other native browsers. Also after taking out 
SVG Web the code also works in IE9 native.

Original comment by mneu...@gmail.com on 17 Dec 2010 at 7:47

Attachments:

• xlink_jpg_ie9mode.jpg
• xlink_jpg_ie7mode.jpg

[GoogleCodeExporter]

There is a problem with the new IE9 compatible object syntax. The following 
will be displayed in Firefox 3.6. native mode:

<!--[if (!IE)|(gte IE 9)]>

see attached screenshot

Original comment by mneu...@gmail.com on 18 Dec 2010 at 8:52

Attachments:

• ff36_newObjectSyntax.jpg

[GoogleCodeExporter]

The image problem from comment #15 should be resolved by r1276. Please give it 
a go.

This was a strange problem and, assuming it works for you, I think I was pretty 
lucky to find a solution (with only a few hours of futzing around with the DOM 
quirks).

I'll take a look at the object syntax next.

Original comment by grick23@gmail.com on 18 Dec 2010 at 8:46

[GoogleCodeExporter]

Perfect! With r1276 the image displays as intended. Sorry I couldn't point to 
the issue any more specific. This is of great help as image backgrounds like 
topographic maps behind a vector layer where both have to zoom and pan together 
is quite common for cartographers.

Original comment by mneu...@gmail.com on 18 Dec 2010 at 8:55

[GoogleCodeExporter]

The object syntax 'shines through' only on Firefox 3.6, not on 4beta and on no 
other browser (Safari, Chrome, Opera). Worst case I'll try to get it out of the 
way cosmetically (with CSS).

Original comment by mneu...@gmail.com on 18 Dec 2010 at 9:05

[GoogleCodeExporter]

The following syntax appears to work but it is 50% bigger.

      <!--[if !IE]>-->
           <object type="image/svg+xml" data="../svg-files/helloworld.svg" 
                   width="200" height="200" id="mySVGObject"> <!--<![endif]-->
      <!--[if lt IE 9]>
           <object classid="image/svg+xml" src="../svg-files/helloworld.svg" 
                   width="200" height="200" id="mySVGObject"> <![endif]-->
      <!--[if gte IE 9]>
           <object type="image/svg+xml" data="../svg-files/helloworld.svg" 
                   width="200" height="200" id="mySVGObject"> <![endif]-->

The problem, as I understand it, is that non IE browsers and IE 9 share the 
same object syntax, but they do not support the same comment syntax. And IE < 9 
and IE 9 share the same comment syntax, but not the same object syntax. So, 
that makes three possible combinations.

If there was a way to combine the comment syntax of IE and non IE then maybe 
there is a better solution.

I'll keep looking at it but I wanted to point out that there appears to be at 
least one solution that works, although the syntax is not that attractive.

Original comment by grick23@gmail.com on 18 Dec 2010 at 9:29

[GoogleCodeExporter]

Ok, will check out that new syntax.

Apart from that I have some problems with the slider example from (the now 
closed) Issue 225, transforming coordinates when the SVG has width/height of 
100%

see here with r1276
http://vis.uell.net/testcases/mouse_to_object_coords.html

otherwise its at
http://vis.uell.net/gsvg/mouse_to_object_coords.html
with anolder version of SVG Web

the slider is working but is way smaller than in all other browsers

Original comment by mneu...@gmail.com on 18 Dec 2010 at 9:34

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Sorry for my previous (now deleted) comment. The new object syntax is flawless, 
I just forget the closing object tag.

Original comment by mneu...@gmail.com on 18 Dec 2010 at 11:27

[GoogleCodeExporter]

Yes, I should have included the closing tag:

      <!--[if !IE]>-->
           <object type="image/svg+xml" data="../svg-files/helloworld.svg" 
                   width="200" height="200" id="mySVGObject"> <!--<![endif]-->
      <!--[if lt IE 9]>
           <object classid="image/svg+xml" src="../svg-files/helloworld.svg" 
                   width="200" height="200" id="mySVGObject"> <![endif]-->
      <!--[if gte IE 9]>
           <object type="image/svg+xml" data="../svg-files/helloworld.svg" 
                   width="200" height="200" id="mySVGObject"> <![endif]-->
           </object>

Original comment by grick23@gmail.com on 19 Dec 2010 at 12:13

[GoogleCodeExporter]

I used the latest syntax from Wikipedia (see end of this section: 
http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_
comment), and I applied it to both clauses, which is what I think was missing 
from Bruce's syntax. This is a bit shorter and is currently my preferred 
syntax, but needs testing:

      <!--[if lt IE 9]><!-- -->
          <object src="../svg-files/helloworld.svg" classid="image/svg+xml"
                  width="200" height="200" id="mySVGObject"> <!--<![endif]-->
      <!--[if (!IE)|(gte IE 9)]><!-- -->
          <object data="../svg-files/helloworld.svg" type="image/svg+xml"
                  width="200" height="200" id="mySVGObject"> <!--<![endif]-->
          </object>

Original comment by grick23@gmail.com on 19 Dec 2010 at 8:44

[GoogleCodeExporter]

On IE 9 pre 7, I am still seeing problems with the flash bridge. (This is 
independent of the various object syntaxes mention in previous comments). The 
symptom is the same - methods exposed on the flash side are not available and 
so you cannot call into flash from javascript, which is essential for SVG Web 
to function. I have managed to work around these problems so far, but who knows 
if my luck will run out.

I am currently seeing a problem on page reloads, apparently when pulling from 
the cache, and an exception is thrown trying to call flash and the SVG does not 
display. More investigation is needed to isolate the scenario, but it *appears* 
to only affect page reloads of embedded SVG using the script tag method in 
flash mode on IE 9.

I can only hope Flash 10.2 helps in this regard. It claims support for IE 9 but 
my suspicion is that just refers to its hardware acceleration support on IE 9.

Original comment by grick23@gmail.com on 19 Dec 2010 at 9:01

[GoogleCodeExporter]

While the proposed syntax in comment #c25 looks promising and works as intended 
in Firefox 3.6.13, it doesn't work at all (SVG object gets displayed but 
onsvgload event not firing) with Safari 5.0.3, Opera 11.0 and Chrome 
8.0.552.231 (all tests on OSX 10.6.5 and with the html5 doctype).

See the attached syntax coloring in SubEthaEdit, that also struggles.

For the time being, the syntax in comment #c24 seems to be the most robust. 

Original comment by mneu...@gmail.com on 20 Dec 2010 at 5:33

Attachments:

• syntax.png

[GoogleCodeExporter]

Fixed problem in comment 26 in r1277.

I also introduced the object syntax from comment 25, but that was before seeing 
comment 27. I'll take another look at it.

Original comment by grick23@gmail.com on 20 Dec 2010 at 5:39

[GoogleCodeExporter]

Did anyone experiment with the flash-style 
<object>
  <embed></embed>
</object>
syntax, that Brad mentioned at the beginning of this issue?

Original comment by mneu...@gmail.com on 20 Dec 2010 at 5:40

[GoogleCodeExporter]

Actually, the original source that was referenced in Issue 132 
http://joliclic.free.fr/html/object-tag/en/object-svg.html did not use embed 
tags, but used param tags:

<object type="image/svg+xml" data="data/test.svg" width="320" height="240">
  <param name="src" value="data/test.svg">
  alt : <a href="data/test.svg">test.svg</a>
</object>

And here is the issue as Brad documented it on line 7410 of src/svg.js:

  // Note: unfortunately we must use the 'src' attribute instead of the 
  // standard 'data' attribute for IE. On certain installations of IE
  // with some security patches IE will display a gold security bar indicating
  // that some URLs were blocked; on others IE will attempt to download the
  // file pointed to by the 'data' attribute. Note that using the 'src'
  // attribute is a divergence from the standard, but it solves both issues.

It seems unlikely that the proposed syntax will resolve the problem described 
above because it still specifies a 'data' attribute.

I did some more testing and based on the quirks of the various parsers, it 
looks more like comment #24 syntax may be the best we can do for now.

Original comment by grick23@gmail.com on 20 Dec 2010 at 7:14

[GoogleCodeExporter]

The sizing problem from comment 21 appears to be a problem with native IE 9. 
When I remove SVG Web and the script tag, and change onsvgload to onload, the 
image renders at the same small size. I consider the problem reported in 
comment 21 outside the scope of this issue for the reasons described below.

There are a number of problems with sizing that have been reported and fixed 
(150, 171, 233, 276, 286, 297, 409) and a number that are still open including 
291, 314, 427, 357, 451, and 512. A number of the problems reported are 
actually the result of inconsistent behavior between browsers. SVG Web has 
attempted to work around these various problems with over 400 lines of 
javascript (around line 8209 of src/svg.js) and I will continue to try to fix 
the most critical problems as best I can.

However, with IE 9 introducing support for SVG, it is now time to start 
thinking about a new phase for SVG compatibility. I think more focus needs to 
be shifted to addressing the browser incompatibilities of SVG in native mode. 
Ultimately I want SVG Web to be transparent enough to be removable, but it is 
not removable if it is being relied upon to work around native behavior 
inconsistencies. Truly addressing this problem means developing tests, testing, 
determining the correct behavior, reporting bugs, lobbying, etc. 

I have made this point before but things have changed with IE 9. First, IE 9 is 
probably going to be popular in the near future. That means I can not longer 
rely on the dominance of firefox in the SVG native market as my "preferred" 
behavior to baseline against. There will be cases where firefox and IE behave 
differently and the choices will be more difficult and the problems more 
visible going forward. Second, I had other things to do and trying to get 
issues fixed in browsers was pretty low on the priority list. And with no IE 
SVG support, a obscure sizing problem in Opera or wherever seemed like a drop 
in the incompatibility bucket. But with IE 9, I worry more that inconsistencies 
with other browser may get locked in by inertia and cause headaches for years 
to come.

---
Anyway, these sizing issues are beyond the scope of this Issue and falls into a 
larger project that I have been planning to work on. 

Given that pretty much all cases are working I would like to propose flipping 
this Issue to fixed soon, and opening new issues for any further problems. 

Original comment by grick23@gmail.com on 20 Dec 2010 at 9:17

[GoogleCodeExporter]

Ok, and sorry I didn't test native IE9 behaviour before, that surely
has to become standard procedure now. That's a very good point you are
making how IE9 changes the perspective.

Absolutely!

Could also be an opportunity now to think about a new release in case
there are some news with regard to IE9 in January. I remember last
time building a release relied on Brad so maybe some advance notice to
whomever will put the next release together might be necessary.

-Michael

Original comment by mneu...@gmail.com on 20 Dec 2010 at 10:18

[GoogleCodeExporter]

IE 9 support has been implemented as of r1301. The specific revisions were 
r1270, r1273 to r1277, r1284, r1291, and r1301.

Tests and examples are in r1285, r1288, r1298, r1302, and r1303.

This is the current ugly object syntax that appears to work the most reliably:

<!--[if !IE]>-->
  <object data="helloworld.svg" type="image/svg+xml"
          width="200" height="200" id="mySVGObject"> <!--<![endif]-->
<!--[if lt IE 9]>
  <object src="helloworld.svg" classid="image/svg+xml"
          width="200" height="200" id="mySVGObject"> <![endif]-->
<!--[if gte IE 9]>
  <object data="helloworld.svg" type="image/svg+xml"
          width="200" height="200" id="mySVGObject"> <![endif]-->
  </object>

Note that IE 9 native mode has numerous differences in behavior with other 
browsers. Previously, SVG Web has implemented numerous workarounds for obvious 
bugs and missing features in native SVG browser support. In the past this was 
fairly straightforward because the correct behavior was clear, for the most 
part. The HTML5 SVG embedding that IE 9, and other newer browser versions are 
supporting introduces significant new ground. Identifying all the discrepancies 
and determining the correct behavior is something that is going to take some 
time. 

I addressed a couple of egregious IE 9 bugs, but addressing every issue with 
HTML5/SVG support in every browser is beyond the scope of this Issue at this 
point. Also, note that Issue 199 already exists to support HTML5 SVG embeds. I 
think further HTML5 support can be pursued via that Issue. Ultimately, we need 
to write a new set of tests in tests/browser-tests/test_js.js to test HTML5 
support.

The main unresolved problem with IE 9 is that it does not appear to support 
dynamically adding an SVG object with javascript. I suspect it is just a bug 
that will be resolved before release of IE 9, but that is unknown at this 
point. If anyone knows how to access the IE 9 bug list, please let me know. The 
problem needs to be reported but I have not got around to that yet. I wrote 
test samples/javascript-samples/svg_object_dynamic_add.html to demonstrate the 
problem (it was written to work without SVG Web).

Thanks go to Michael Neutze for help with IE 9 testing.

Original comment by grick23@gmail.com on 30 Dec 2010 at 8:12

• Changed state: Fixed