Not working in IE9

[ghenghis]

Not working in IE9

[GoogleCodeExporter]

Same problem on IE8

Original comment by [email protected] on 20 Jun 2012 at 1:01

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Do note on the future wiki page, Neil notes "IE support (definitely 10, maybe 
earlier?)." 

http://code.google.com/p/blockly/wiki/Future

I am assuming that means version 10 of IE

Original comment by Techplex.Engineer on 30 Oct 2012 at 11:13

[GoogleCodeExporter]

As I understand it, IE9 was the first to support SVG.  Thus unless one has 
Adobe's plugin, Blockly will never run in IE8 or earlier.  Unconfirmed reports 
indicate that Blockly does run in IE10.  Blockly is known not to run in IE9, 
though we don't know why.

The fundamental issue is that nobody on the development team has access to a 
Windows computer.  We've done limited testing using the Photobooth in the 
lobby, but it doesn't have a keyboard, which makes debugging challenging.

Original comment by [email protected] on 30 Oct 2012 at 11:19

Attachments:

• browsers3.jpg

[GoogleCodeExporter]

blockly works fine on IE9 provided you make the follow two things:

* load es5-shim.js
* set render engine to IE9 (not quirk mode)

after that it works fine, you can check here (loads ES5 shim, change render 
mode to IE9 on your machine): 

http://marianoguerra.github.com/json-edit/eflang/

Original comment by [email protected] on 26 Nov 2012 at 11:42

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

adding this to the head section forces IE to use the latest render engine (or 
chrome frame if available)

<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >

I added it to this page and it works fine:

http://marianoguerra.github.com/json-edit/eflang/

no need to change anything on IE :)

Original comment by [email protected] on 26 Nov 2012 at 11:52

[GoogleCodeExporter]

With what I found so far, I would agree with @luismarianoguerra except:

* One must also account for IE treating the css attribute "height: 100%;" 
slightly different than others, see the attached css_height_100_ex.png for an 
example.  As suggested at 
http://stackoverflow.com/questions/4954147/css-100-height-in-ie; on the 
frame.html 
(http://code.google.com/p/blockly/source/browse/trunk/demos/iframe/frame.html) 
within the style div starting at line 10, add 'height:100%;' to the html, body 
style definitions to make it:  

    <style>
      html, body {
        background-color: #fff;
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100%;
      }
      .blocklySvg {
        height: 100%;
        width: 100%;
      }
    </style>

From my limited initial testing, this solution is also backwards compatible 
with other browsers.

* I am also finding a slight mismatch between the cursor position and the 
location of the SVG block location.  See attached svg_ex_1 and svg_ex_2 for 
examples.  Unfortunately the screen grabs did not get the mouse cursor however 
the effects of the mismatched positions can be seen where the blocks are 
attempting to snap together.  This behavior is not limiting to the usage of 
Blockly however it is less than ideal.  An explanation of this behavior would 
require more research however hopefully in stating the issue, one who knows SVG 
nuances in IE will comment.    

Michael

Original comment by [email protected] on 6 Jan 2013 at 9:48

Attachments:

• css_height_100_ex.png
• svg_ex_1.png
• svg_ex_2.png

[GoogleCodeExporter]

Issue 111 has been merged into this issue.

Original comment by [email protected] on 5 Feb 2013 at 4:42

[GoogleCodeExporter]

I didt some debug on IE9 in current version.

es5-shim.js 
  Solved the first issues


######

IE can not handle parent element of svg

In   Blockly.SvgComponent.prototype.enterDocument

element.parentElement;

Is undefined in IE.

A test replace agains an document.getElementById() works.

######

In   Blockly.Xml.workspaceToDom

xml.appendChild(element);

Is undefined in IE.


######

In   Blockly.TopComponent.prototype.populateDom_

    this.toolbox_ = Blockly.Toolbox.getInstance();
    // TODO(scr): Once use of getInstance is removed, change to this line:
    // this.toolbox_ = new Blockly.Toolbox(this.getDomHelper());

There is no getInstance in IE

Original comment by [email protected] on 17 Feb 2013 at 8:25

[GoogleCodeExporter]

Original comment by [email protected] on 8 May 2013 at 5:23

• Changed state: Accepted

[GoogleCodeExporter]

r1081, r1082, r1083 fixed most IE9/10 issues. The next step is to add DOCTYPEs 
and force IE9 into standards mode. With that, most of the apps work.

The Graphing calculator toolbox doesn't display all the blocks it should as in 
IE9, even with these fixes.

Original comment by [email protected] on 12 Jul 2013 at 7:07

[GoogleCodeExporter]

Marking fixed because IE9 is mostly supported. Will open separate issues for 
remaining bugs.

Original comment by [email protected] on 13 Jul 2013 at 1:12

• Changed state: Fixed

[GoogleCodeExporter]

i found a solution with my team.. 
we note that problem occurs in a append command in Blockly.Xml.workspaceToDom.

before:

Blockly.Xml = {};
Blockly.Xml.workspaceToDom = function(a)
{
    var b;
    Blockly.RTL && (b = a.getWidth());
    var c = goog.dom.createDom("xml");
    a = a.getTopBlocks(!0);
    for (var d = 0, e; e = a[d]; d++)
    {
        var f = Blockly.Xml.blockToDom_(e);
        e = e.getRelativeToSurfaceXY();
        f.setAttribute("x", Blockly.RTL ? b - e.x : e.x);
        f.setAttribute("y", e.y);
        c.appendChild(f)
    }
    return c
};

after:

Blockly.Xml = {};
Blockly.Xml.workspaceToDom = function(a)
{
{
    var b;
    var c = goog.dom.createDom("xml");
    var returnValue = (new XMLSerializer()).serializeToString(c);                    

    Blockly.RTL && (b = a.getWidth());
    a = a.getTopBlocks(!0);                    

    for (var d = 0, e; e = a[d]; d++)
    {
        var f = Blockly.Xml.blockToDom_(e);
        e = e.getRelativeToSurfaceXY();
        f.setAttribute("x", Blockly.RTL ? b - e.x : e.x);
        f.setAttribute("y", e.y);
        var aux = (new XMLSerializer()).serializeToString(f);
        returnValue += aux;
    }                 
    return returnValue;
};


now, we dont return xml.. now the return is a string with the xml code.

Original comment by [email protected] on 13 Mar 2015 at 8:06