Flashing bug in slideUp/Down in Internet Explorer 7

[StevenTyler]

The sliding component flashes the whole of itself right before slideDown() starts, and right before slideUp() finishes. Which browser? Only in Internet Explorer! Surprised?

Code:

<script type="text/javascript" src="../js/jquery-1.2.js"></script>

<script type="text/javascript">

var open = false;

$(document).ready(function() {

$('#har').click(function() {

if (open) {

$('#ok').slideDown(1000); open = false;

} else {

$('#ok').slideUp(1000); open = true;

}

});

});

</script>

<div style="height:100px; width:200px; background: yellow" id="ok"> HEY! <br/><br/> if you think users aren’t able to discern between their preview, then you </div>

<br/>

<input type="button" value="CLICK" id="har"/>

[davidserduke]

I think this is a quirksmode only issue. If you add a DOCTYPE to this example it will work. The problem comes when the style.height = "0px". In quirksmode (for both IE6 and IE7), it appears to decide the height should be shown as the minimum where all the contents of the div can be shown.

The solution appears to be to change jQuery.fx.prototype.custom such that the 'from' and 'to' parameters are never 0 for quirksmode but rather 1.

custom: function(from, to, unit) {
  if (isQuirksmode) {
    if (!from) from = 1;
    if (!to) to = 1;
  }

Worth it? I don't know but I figured I'd pass on what I found. I haven't tested for any additional side effects.

[davidserduke]

Well I just thought of at least one negative side effect for when the units aren't px. A '1em' could be pretty big for example.

[catch]

I can confirm this is present in IE6 and IE7 in jQuery 2.1 with a transitional doctype - I reproduced the behaviour reported here: ​http://groups.google.com/group/jquery-dev/browse_thread/thread/85c2d334fae35d85 ​http://sd-5269.dedibox.fr/temp/jquery/bug114T.html

[davidserduke]

Ahh I hadn't tested transitional, just strict and quirks. Great test cases by the way. In the end, it was the same problem. Since it was quirks AND transitional I did some more digging. As near as I can tell, when using fx.show() and fx.hide() the units can only be "px" so instead of patching fx.custom() it looks like patching fx.show() and fx.hide() is the way to go. It seemed to work fine starting and ending at 1 instead of 0 for all browsers I tested (IE6/7, FF2, Opera 9) so it doesn't have to be special cased.

The only issue I can see here is if someone uses fx.custom() directly then it might flash if they start it at zero. It might be something that should be covered in documentation instead of code though.

I attached a patch with the changes. Any help testing the millions of possible situations to make sure the bug is really fixed and it didn't mess up anything else would be great.

[davidserduke]

Ack, nevermind all that. The transitional doctype was incorrect in the test case (missing "​http://www.w3.org/TR/html4/loose.dtd" at the end). Thus it really was still in quirksmode. Thank Brandon for pointing that out.

​http://groups.google.com/group/jquery-dev/browse_thread/thread/5feeb8d6f869cc30

So this is back to an IE quirksmode only bug.

[davidserduke]

The official position stated in the above thread is "Right now we are not really supporting fx in quirks mode." so I'm closing this bug.

[pixelwiz]

Code for the file that has the problem

[pixelwiz]

Hi,

I am having this exact problem with a menu I created in IE6. When it is expanded SlideDown('Slow'), or SlideUp('Slow'), before and after it's done moving there is a flash on the screen in Internet Explorer 6. In Firefox 1.0.7 it's not as apparent, but the links inside the menu blink very briefly, but it's not nearly as apparent. I've tried different DOCTYPE declaration, and everyone I tried has the same problem. How do I get around this problem?

I attached the test.html code with the problem

-Roman

[davidserduke]

That test case is running in Quirks mode (which is no longer supported for jQuery effects). Try loading it and running in the address bar:

javascript:alert(document.compatMode);

and it will alert "BackCompat".

The problem is you have something before the DOCTYPE declaration. If you remove the first 4 lines and put them in the <body> element (where they should probably be anyway?) such that the DOCTYPE is on the very first line of the html file then when you reload and check the document.compatMode it will show "CSS1Compat" and will no longer blink the way this ticket mentions.

[anonymous]

Try: animate the height to 1, then hide (if it is text in a div, make sure the div has style of 'overflow:hidden') and it should work.

[cl_liu@…]

Replying to anonymous:

Try: animate the height to 1, then hide (if it is text in a div, make sure the div has style of 'overflow:hidden') and it should work.

Yep this works: divLinked.animate({height: '1px'}, 300, 'swing', function(){

divLinked.hide(); divLinked.css('height', );

});