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)
Change History (11)
Changed September 27, 2007 06:29PM UTC by 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 7 → Flashing bug in slideUp/Down in Internet Explorer 7 |
Changed October 02, 2007 04:39AM UTC by 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 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 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
Changed October 05, 2007 04:34PM UTC by 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 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 comment:7
| resolution: | → wontfix |
|---|---|
| status: | new → closed |
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 comment:8
| resolution: | wontfix |
|---|---|
| status: | closed → reopened |
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 comment:9
| resolution: | → wontfix |
|---|---|
| status: | reopened → closed |
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 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 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', '');
});