GWT: IE8 problem with composite over DockLayoutPanel, the unit EM, and the Singleton design pattern

Question

Hi everyone,

I have a "Welcome Screen" which is made by hand from the entry point. On the other side, I have Widget named Main which uses the Singleton pattern: this Widget encapsulates the application funcionality and there should be only one instance in the application. This Widget is a composite over a DockLayoutPanel, which has north, west and center panels. The unit used to define the size of these panels is EM.

The problem raises in IE8. If I use the Widget the first time I call Main.getInstance() everything is fine. However, if I use it (add it to RootLayoutPanel) after the first time, IE8 only shows the center panel.

If I use PX insted of EM, everything works fine.

Here is the code:

//BugTest.java
package com.bugtest.clearadd.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.user.client.ui.RootPanel;

public class BugTest implements EntryPoint {

    @Override
    public void onModuleLoad() {
        Button prefetchButton = new Button("Prefetch!");
        prefetchButton.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                //Invoke the function but do nothing.
                Main.getInstance();

                PopupPanel popupPanel = new PopupPanel(true);
                popupPanel.setWidget(new Label("Prefetching finished!"));
                popupPanel.center();
            }
        });

        Button switchButton = new Button("Switch!");
        switchButton.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                //Here I use the result of the function
                Main result = Main.getInstance();
                RootPanel.get().clear();
                RootLayoutPanel.get().add(result);
            }
        });

        FlowPanel flowPanel = new FlowPanel();
        flowPanel.add(new Label("Bug test!"));
        flowPanel.add(prefetchButton);
        flowPanel.add(switchButton);

        RootPanel.get().add(flowPanel);
    }

}

//Main.java
package com.bugtest.clearadd.client;

import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.ResizeComposite;

public class Main extends ResizeComposite {

    private static Main instance = null;

    public static Main getInstance() {
        if (instance == null) {
            instance = new Main();
        }
        return instance;
    }

    private Main() {
        DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
        dockLayoutPanel.addNorth(new Label("North!"), 7);
        dockLayoutPanel.addWest(new Label("West!"), 15);
        dockLayoutPanel.add(new Label("Center! :D"));
        initWidget(dockLayoutPanel);
    }

}

Is it a bug or I am just missing something?

This problem raised from this post: http://stackoverflow.com/questions/3313553/gwt-code-splitting-strange-behaviour-in-ie8

Thanks in advance.

EDIT: I posted the issue here: http://code.google.com/p/google-web-toolkit/issues/detail?id=5156