Skip to content
This repository has been archived by the owner on Apr 20, 2023. It is now read-only.

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

Open
lojjic opened this issue Jul 19, 2010 · 7 comments

Comments

@lojjic
Copy link
Owner

lojjic commented Jul 19, 2010

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
Copy link
Owner Author

lojjic commented Jul 19, 2010

Testcase document committed as tests/submitted/issue41.html

@DusanMilko
Copy link

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
Copy link
Owner Author

lojjic commented Jul 21, 2010

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
Copy link

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
Copy link

macbeth commented Jan 23, 2011

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
Copy link

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
Copy link

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

gucong3000 pushed a commit to gucong3000/PIE that referenced this issue Apr 22, 2016
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants