IE8: Toggling container display:none/block doesn't update rendering sometimes

[lojjic]

This comes from forum posting http://css3pie.com/forum/viewtopic.php?f=3&t=23 submitted by "solidblack":

Hi there,

First of all: thanks for that great script!!!! It works (almost) perfect for me and saves me a lot of photoshopping/coding to get round borders and box shadows look like in serious browsers ;-)

I'm getting in trouble with this in Internet Explorer 8 (7): I display/hide containers via jquery, If I do so twice (click on the tabs at the top), the borders and shadows suddenly disappear. Have a look at this: http://speth.bplaced.net/labs/css3_ie/

I've tried to fix it with a position:relative but without effect...

Can anyone pleeeeease get me out of this bad IE ( :x ) behaviour....Any hints?

Thanks in advance solid

[lojjic]

Testcase document committed as tests/submitted/issue41.html

[DusanMilko]

i tried ur test case in ie8 and ie7, and i didn't get an error, i recorded testing it in ie7 here: http://screenr.com/71X

[lojjic]

The original testcase on speth.bplaced.net has been modified to include a workaround which I suggested in the forum, so it makes sense that it's now working. The committed version should still show the problem in IE8.

[tysonmalchow]

alternatively, you can simply modify PIE.htc to update when display is changed. just change line 11 to include an update() call after the propChanged() call.

<PUBLIC:ATTACH EVENT="onpropertychange" FOR="element" ONEVENT="propChanged();update();" />

seemed to work for me.

[macbeth]

another possible solution is to force the rendering via javascript

function refresh() {
    if ($.browser.msie) 
        $('selectorToCss3StyledElement').each(function () { this.fireEvent('onmove') });
}

and call this function right after the change of the display property

For istance if you animate a div with jquery and fadeIn / fadeOut

$('selectorToTrigger').hover(
    function () {
        $('selectorToCss3StyledElement').fadeIn();
                refresh();
    },
        function () {
            $('selectorToCss3StyledElement').fadeOut();
                refresh();
        }
);

original code: http://css3pie.com/forum/viewtopic.php?f=3&t=23&p=98&hilit=display:none#p98

[gaga1227]

If none of the above fixes work for you, try separating the manipulation of display property away from the element with CSS3Pie applied.

e.g. a simple div wrapper to control the display property and its child having all the CSS3Pie styles.

[lhwparis]

any way this problem can be solved with an PIE update? what about including the fix from @tysonmalchow ? @macbeth solution works but i prefer a PIE fix over ie-specific JS code