Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Open
lojjic opened this Issue · 7 comments

6 participants

@lojjic
Owner

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
Owner

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
Owner

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.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.