Bug Tracker

Opened 13 years ago

Closed 13 years ago

Last modified 9 years ago

#1726 closed bug (wontfix)

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 (last modified by brandon)

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 (936 bytes) - added by davidserduke 13 years ago.
test.html (19.9 KB) - added by pixelwiz 13 years ago.
Code for the file that has the problem

Download all attachments as: .zip

Change History (13)

comment:1 Changed 13 years ago by brandon

Description: modified (diff)
Summary: Flashing bug in slideUp/Down in Internet Fuckin Explorer 7Flashing bug in slideUp/Down in Internet Explorer 7

comment:2 Changed 13 years ago by 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.

comment:3 Changed 13 years ago by 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.

comment:4 Changed 13 years ago by 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

comment:5 Changed 13 years ago by 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.

Changed 13 years ago by davidserduke

Attachment: 1726.diff added

comment:6 Changed 13 years ago by 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.

comment:7 Changed 13 years ago by davidserduke

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 13 years ago by pixelwiz

Attachment: test.html added

Code for the file that has the problem

comment:8 Changed 13 years ago by pixelwiz

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

comment:9 Changed 13 years ago by davidserduke

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.

comment:13 Changed 10 years ago by 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.

comment:14 in reply to:  13 Changed 9 years ago by 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', );

});

Note: See TracTickets for help on using tickets.