Forums
View unanswered posts | View active topics It is currently Thu Apr 24, 2014 1:18 pm



Reply to topic  [ 3 posts ] 
 Problems IE8: switching between display:none display:block 
Author Message

Joined: Mon Jul 19, 2010 2:41 am
Posts: 2
Post Problems IE8: switching between display:none display:block
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


Mon Jul 19, 2010 2:52 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: Problems IE8: switching between display:none display:blo
Thanks very much for the testcase, it will help tremendously in fixing this bug. I've opened ticket http://github.com/lojjic/PIE/issues/issue/41 to track this.

In the meantime, here's a workaround which will hopefully force IE8 to update the element rendering:

Code:
$(document).ready (function () {
    function refresh(cont) {
        if($.browser.msie) $( cont + ' .box').each( function() { this.fireEvent('onmove') } );
    }

    $('.caller').each (function () {
        $(this).bind ('click, mouseover', function () {
            $('.caller').removeClass('active');               
            $(this).addClass('active');           
        });   
    });
    $('#caller_con_1').bind ('click', function () {   
        $('.con').css ('display', 'none');
        $('#con_1').css ('display', 'block');
        refresh('#con_1');
    });
    $('#caller_con_2').bind ('click', function () {
        $('.con').css ('display', 'none');
        $('#con_2').css ('display', 'block');
        refresh('#con_2');
    });
    $('#caller_con_3').bind ('click', function () {   
        $('.con').css ('display', 'none');
        $('#con_3').css ('display', 'block');
        refresh('#con_3');
    });
    $('#caller_con_4').bind ('click', function () {   
        $('.con').css ('display', 'none');
        $('#con_4').css ('display', 'block');
        refresh('#con_4');
    });
});



This basically just forces an onmove event to be fired for each of the elements, so PIE will update the position/size of the rendering. The problem stems from IE8 being buggy and not always firing onmove/onresize events when it should. I'm working on a generic fix for this.


Mon Jul 19, 2010 8:29 am
Profile

Joined: Mon Jul 19, 2010 2:41 am
Posts: 2
Post Re: Problems IE8: switching between display:none display:blo
Wow, thanks a lot!!!! That really works for me and fixes my problem. :D

Thank you for doing such a great work for me and the webdev community.

solid


Tue Jul 20, 2010 12:39 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 3 posts ] 

Who is online

Users browsing this forum: Baidu [Spider], Bing [Bot], Google [Bot], Steeler [Crawler] and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.