CODEWITHSUNDEEP
jquerycssinternet-explorerdebugging
JJ.
JJ.

Reputation: 79

IE Bug: toggleClass and overflow:hidden issue

Having difficulties with IE (9 and 10). Have not tested IE8, but it's probably the same scenario.

Brief description:

Here is a JSFiddle that showcases the problem

I am using this code to do the jQuery magic:

$('#BLOG').on('click', '.expand', function() {
    var $this = $(this);
    $this.closest('.POST-WRAPPER').find('.post').toggleClass('height')
                                                .toggleClass('overflow');
});

But to fix the problem, I need to (somehow) force IE to 'repaint' the once hidden part of the <div/> as it's expanded.

Any ideas?

Upvotes: 1

Views: 542

Answers (1)

Linus Caldwell
Linus Caldwell

Reputation: 11068

Well, normally I would not suggest a hack, but since this one is a bug, a hack seems to be ok: Try to force IE the redraw somehow. One solution that works and in your example does not have any visible side effects is using padding-left on the <img/>:

img {
    padding-left: 0;
}

.height img {
    padding-left: 1px;
}

Here is a demo.

Sidenote: You should reconsider the class names. Better use "expanded" or "collapsed" or something else that's meaningful. And you do not need the overflow class because overflow: visible is the default value anyway. Could be like this fiddle.

Upvotes: 1

Related Questions