Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Open
lojjic opened this Issue · 7 comments

6 participants

Jason Johnston DusanMilko Tyson Malchow macbeth Johnny Xu Timo
Jason Johnston
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

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

Jason Johnston
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.

Tyson Malchow

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

Johnny Xu

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.

Timo

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.