Using <!DOCTYPE HTML> breaks Canvas in IE8

GoogleCodeExporter commented 8 years ago

The GWT 2.0 layout system is intended to work only in "standards mode". 
This means that one should always place the following declaration at the 
top of HTML pages: <!DOCTYPE html>

What version of gwt and gwt-incubator are you using?
2.03 and Incubator trunk

What OS and browser are you using?
Windows 7 and IE8

Do you see this error in hosted mode, web mode, or both?
Both

(If possible, please include a test case that shows the problem)

To reproduce, just add <!DOCTYPE HTML> to GWTCanvasDemo.html
Open it in IE8 and make sure it is set to Browser Mode IE8 (and not to 
compatibility mode)

What is the expected output? What do you see instead?
Instead of sample graphics it shows empty rectangle. 

Workaround if you have one:
Setting browser to compatibility resolves the issue.

Original issue reported on code.google.com by urg...@gmail.com on 19 Mar 2010 at 6:34

GoogleCodeExporter commented 8 years ago

The rect is not displayed if adding the GWTCanvas created by the following code:

    private GWTCanvas createCanvas() {
        GWTCanvas canvas = new GWTCanvas(400, 400);

        canvas.setBackgroundColor(Color.RED);

        canvas.setLineWidth(1);
        canvas.setStrokeStyle(Color.GREEN);

        canvas.saveContext();

        canvas.setLineWidth(1);
        canvas.setStrokeStyle(Color.RED);

        canvas.translate(100, 100);
        canvas.strokeRect(0, 0, 100, 100);
        canvas.restoreContext();

        canvas.strokeRect(1, 1, 80, 80);

        return canvas;

    }

If we switch the text mode to Quirks in IE8, then everything works fine.

Original comment by tom.x.fi...@gmail.com on 10 Jun 2010 at 2:36

GoogleCodeExporter commented 8 years ago

Hi
I have also noticed this but I believe this is a known problem with canvas/vml 
tag and IE8. Others on internet solve the problem by putting the "canvas" in an 
iframe which is "quirks mode", but I can not see how that is possible with GWT.

Here is link for solution I mention
http://greghoustondesign.com/examples/canvas-ie8/

Hope this can help in a solution.

Original comment by flemming...@gmail.com on 14 Jun 2010 at 2:42

GoogleCodeExporter commented 8 years ago

Similar issue as 351, I think.
We have implemented a component similar to a image map using canvas, it works 
great and very useful but no way it works on IE.

That is an important feature in the application we are developing so this 
defect is bad news.

Original comment by ped...@gmail.com on 27 Jul 2010 at 7:41

GoogleCodeExporter commented 8 years ago

Hey guys. Please do you work on a fix ? this defect is a very bad news for us 
to.

Original comment by fabien.g...@gmail.com on 10 Sep 2010 at 8:34

GoogleCodeExporter commented 8 years ago

Hi  

Browsing the GChart issuses revealed a fix for this problem, that I can verify 
at my setup is working.

in the GWTCanvas class I add the following.

    protected void onAttach() {
        super.onAttach();
        fix(this.getElement());        
    }

    public static native void fix(Element el) /*-{
    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf("msie") != -1 && $doc.documentMode && $doc.documentMode>=8) {

        if (!$doc.namespaces["v"]) {
            $doc.namespaces.add("v","urn:schemas-microsoft-com:vml","#default#VML");
        }
        var col = el.getElementsByTagName('shape');
        for(var i=0;i<col.length;i++) {
            col[i].outerHTML = col[i].outerHTML;
            col[i].style.width='10px';
            col[i].style.height='10px';
        }
    }
    }-*/;

In the GWTCanvasImplIE6.class I change the method init() to the following and 
then that it.

    private static native void init() /*-{
    if (!$doc.namespaces["v"]) {
        if($doc.documentMode &&$doc.documentMode>=8) {
            $doc.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML");
        } else {
            $doc.namespaces.add("v", "urn:schemas-microsoft-com:vml");
            $doc.createStyleSheet().cssText = "v\\:*{behavior:url(#default#VML);}";
        }
    }-*/;

But the explanation for this fix is carefully documented in the "issuse" at the 
GChart project issuse.

Hope it works for you

/FLemming

Original comment by flemming...@gmail.com on 12 Oct 2010 at 12:01

GoogleCodeExporter commented 8 years ago

Dammit....there is a copy paste error   . Here is the Correct version of init()

private static native void init() /*-{
    if (!$doc.namespaces["v"]) {
        if($doc.documentMode &&$doc.documentMode>=8) {
            $doc.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML");
        } else {
            $doc.namespaces.add("v", "urn:schemas-microsoft-com:vml");
            $doc.createStyleSheet().cssText = "v\\:*{behavior:url(#default#VML);}";
        }
    }
    }-*/;

Original comment by flemming...@gmail.com on 12 Oct 2010 at 12:03

GoogleCodeExporter commented 8 years ago

Any possibility of attaching the jar with the fix?

Original comment by pshopnc...@gmail.com on 14 Oct 2010 at 6:19

GoogleCodeExporter commented 8 years ago

I do not have the jar file...because I have included these few java classes in 
my project., so I dont need the big incubator jar file in my project

Original comment by flemming...@gmail.com on 25 Oct 2010 at 1:24

GoogleCodeExporter commented 8 years ago

I think this issue might have been fixed.  The new release of incubator 
(gwt-incubator-20101117-r1766.jar) has changes in the IE implementation of 
canvas (namespace stuff) that appear to fix this problem. GWTCanvas and IE8 are 
now working for me in standards mode.

I think the developer who fixed it should update this ticket (& 351) with some 
sort of feedback.  This was a huge issue for us.  I appreciate the effort!

Original comment by rob...@gmail.com on 5 Jan 2011 at 6:37

poptanimukesh / google-web-toolkit-incubator

Using <!DOCTYPE HTML> breaks Canvas in IE8 #348