Home › Developer Forums › Echo 3.x Platform (Echo3) › Help & Support (3.x)

Help with IE7 specific "feature" needed

a.schild's picture
Tue, 06/23/2009 - 23:31 — a.schild

Hello,

we are currently working on the Date/Time selector component of echopoint.
So far everything work as expected, of course with ONE exception:

In IE7 (Not IE6 and IE8) as soon as we display or hide the popup calendar, the rest of the echo content goes white.
If we then resize the IE7 browser window by one pixel (or more), the complete content is showing up correctly.

I have attached two printscreens:

- Calendar1 showing the screen before creating the calendar popup
- Calendar2 showing the screen AFTER creating the calendar popup

When we have a white content and then try to select the visible element in the IE developper toolbar, we get the HTML node selected.

The code is based on the jQuery plugin for the dynarch calendar.

http://code.google.com/p/dyndatetime/
We don't see any such odd behaviours when using the calendar outside of echo.

BTW: What are the different div's for in a echo3 application ?

- The div id=approot is the main container
? The second div is out of screen (height 1200px, top -1300px, width 1600px, left -1700px)
- Then we have the div of the debug console
? Then there is another div with border and background colors #abcdef with display style none

As our calendar gets appended AFTER alls div's, I wonder if there is some hack in the div's which causes the problem we see.

André

‹ Expected SelectField keyboard behaviour Is it possible to add ProgressBar to FileTransfer component ›
Wed, 06/24/2009 - 02:10 — tliebeck
tliebeck's picture

Invoke the

Invoke the Echo.Client.forceRedraw() method (on your client instance) whenever you add something to the BODY element. Echo has to to do this in menus and other components. Definitely one of the more infuriating IE bugs I've seen.

When it happens, IE suddenly thinks the offsetHeight of the BODY (or Echo.Client.domainElement) is zero, and displays the screen accordingly. So forceRedraw() checks to see if the offsetHeight of domainElement is zero, and then sets its "display" property to none temporarily to force a proper redraw:

    /**
     * Force various browsers to redraw the screen correctly.  This method is used to workaround the blank screen bug in 
     * Internet Explorer and the CSS positioning bug in Opera. 
     */
    forceRedraw: function() {
        if (this.parent) {
            this.parent.forceRedraw();
        } else if (Core.Web.Env.QUIRK_IE_BLANK_SCREEN) {
            if (this.domainElement && this.domainElement.offsetHeight === 0) {
                // Force IE browser to re-render entire document if the height of the application's domain element measures zero.
                // This is a workaround for an Internet Explorer bug where the browser's rendering engine fundamentally fails and 
                // simply displays a blank screen (commonly referred to on bug-tracker/forum as the "blank screen of death").
                // This bug appears to be most prevalent in IE7. 
                var displayState = document.documentElement.style.display || "";
                document.documentElement.style.display = "none";
                document.documentElement.style.display = displayState;
            }
        }
    },

As for the DIVs, the big one if the offscreen measuring area. The #abcdef-colored one is the Please wait indicator.

Wed, 06/24/2009 - 05:15 — a.schild
a.schild's picture

Thanks, this fixed the IE7

Thanks, this fixed the IE7 issue, the component will be updated in echopoint in the next days (Still some cleaning to do and a memory leak to fix)

André