Skip to main content

Bug Tracker

Side navigation

#1726 closed bug (wontfix)

Opened September 25, 2007 09:40AM UTC

Closed February 05, 2008 10:17PM UTC

Last modified March 15, 2012 12:12AM UTC

Flashing bug in slideUp/Down in Internet Explorer 7

Reported by: StevenTyler Owned by:
Priority: major Milestone: 1.2.2
Component: effects Version: 1.2.1
Keywords: Cc:
Blocked by: Blocking:
Description

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"/>

Attachments (2)
  • 1726.diff (0.9 KB) - added by davidserduke October 05, 2007 05:12PM UTC.
  • test.html (19.9 KB) - added by pixelwiz February 05, 2008 07:56PM UTC.

    Code for the file that has the problem

Change History (11)

Changed September 27, 2007 06:29PM UTC by brandon comment:1

description: The sliding component flashes the whole of itself right before slideDown() starts, and right before slideUp() finishes. Which browser? Only in Internet Shithole 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"/>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"/>
summary: Flashing bug in slideUp/Down in Internet Fuckin Explorer 7Flashing bug in slideUp/Down in Internet Explorer 7

Changed October 02, 2007 04:39AM UTC by davidserduke comment:2

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.

Changed October 02, 2007 05:02AM UTC by davidserduke comment:3

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.

Changed October 05, 2007 11:09AM UTC by catch comment:4

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

Changed October 05, 2007 04:34PM UTC by davidserduke comment:5

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.

Changed October 05, 2007 06:52PM UTC by davidserduke comment:6

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.

Changed November 19, 2007 12:06AM UTC by davidserduke comment:7

resolution: → wontfix
status: newclosed

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.

Changed February 05, 2008 07:57PM UTC by pixelwiz comment:8

resolution: wontfix
status: closedreopened

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

Changed February 05, 2008 10:17PM UTC by davidserduke comment:9

resolution: → wontfix
status: reopenedclosed

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.

Changed October 20, 2010 05:45PM UTC by anonymous comment:10

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.

Changed September 20, 2011 06:45PM UTC by cl_liu@30web.com comment:11

Replying to [comment:13 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', '');

});