Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
6 participants
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

Owner

lojjic commented Jul 19, 2010

Testcase document committed as tests/submitted/issue41.html

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

Owner

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.

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

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.

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 join this conversation on GitHub. Already have an account? Sign in to comment