Side navigation
#7978 closed bug (wontfix)
Opened January 15, 2011 01:41AM UTC
Closed February 06, 2011 03:43PM UTC
Last modified March 10, 2012 12:09PM UTC
chrome fadein and fadeout do not work
| Reported by: | sun.ga2r@gmail.com | Owned by: | |
|---|---|---|---|
| Priority: | low | Milestone: | 1.next |
| Component: | effects | Version: | 1.4.4 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
I have a menu that fades in, but it doesn't fade in/out in chrome. FF works fine. It basically uses the show/hide functions.
JS:
var delay = 100;
var fade = 400;
$j(function(){
var inner="";
$j('#access-navi .sub > a').toggle(function(){
inner=$j(this).parent().find('ul li');
inner.each(function(i){
$j(this).delay(i*delay).fadeIn(fade);
});
},function(){
inner.fadeOut(fade/2);
});
});
HTML:
<div id="access-navi" class="no-j" role="navigation"> <ul> <li><a href="/">Home</a></li> <li class="sub"><a href="#">Code</a> <ul> <li><a href="/code/html-css/">Html Css</a></li> <li><a href="/code/java/">Java</a></li> <li><a href="/code/jquery/">jQuery</a></li> <li><a href="/code/php/">Php</a></li> </ul> </li> </ul> <div class="clear"></div> </div>
CSS:
#access-navi { height:50px; }
#access-navi ul { outline:none; }
#access-navi ul li { display: inline; }
#access-navi ul li a
{ outline:0; background-color: #101010; border-bottom: 5px solid #101010; color: #DDDDDD; display: block;
float: left; margin-right: 30px; padding: 10px 30px 5px; text-decoration: none;}
#access-navi .sub li
{ display:none; }
Attachments (0)
Change History (9)
Changed January 15, 2011 05:02AM UTC by comment:1
Changed January 16, 2011 12:20AM UTC by comment:2
| priority: | undecided → low |
|---|---|
| resolution: | → invalid |
| status: | new → closed |
I've reproduced the code you posted here, however looking at the source scripts used on your site I see that whats been posted is incomplete (and so this doesn't work).
Please note that the jQuery Core Bug Tracker is only to be used for reporting specific reduced issues which can be tested and evaluated by the triage team. We do not have the resources to look through your site, however if you ask about the issue in the jQuery Forums or our IRC channel #jquery, someone there may be able to assist.
If you can reduce the issue down to something reproducible on jsFiddle we'll be happy to take another look at this.
Changed January 16, 2011 01:05AM UTC by comment:3
So i made the neccesary changes to the code to get it to work. I still seem the same effect even in jSfiddle. When i load the test case into FF it fadeins the li elements, but in chrome it does not(show/hide).
Replying to [comment:2 addyosmani]:
I've reproduced the code you posted here, however looking at the source scripts used on your site I see that whats been posted is incomplete (and so this doesn't work). Please note that the jQuery Core Bug Tracker is only to be used for reporting specific reduced issues which can be tested and evaluated by the triage team. We do not have the resources to look through your site, however if you ask about the issue in the jQuery Forums or our IRC channel #jquery, someone there may be able to assist. If you can reduce the issue down to something reproducible on jsFiddle we'll be happy to take another look at this.
Changed January 17, 2011 12:28AM UTC by comment:4
| component: | unfiled → effects |
|---|---|
| resolution: | invalid |
| status: | closed → reopened |
| version: | 1.4.2 → 1.4.4 |
This reduced test case reproduces the problem in Chrome. It seems Chrome has some problem with the float: left on the links. If you remove that css-property the animation works fine.
Reopening this ticket until we have established if this is a Chrome browser bug or something jQuery should handle "differently".
Changed January 25, 2011 12:55AM UTC by comment:5
Changed February 06, 2011 03:43PM UTC by comment:6
| resolution: | → wontfix |
|---|---|
| status: | reopened → closed |
This is a very narrow WebKit rendering bug with an incredibly specific set of circumstances required to trigger. There are enough workarounds available, documented in this reduced testcase that I am setting this report to wontfix. Here are upstream bug reports:
Changed June 06, 2011 09:02PM UTC by comment:7
I discovered this bug today, and was looking for a solution. Was hoping this would help http://jsfiddle.net/Mdv8e/55/. However I discovered that if I hover over menu in question (the one which has a problem) and select the text inside of it the menu starts to work normally, the way it was intended.
Changed June 06, 2011 09:57PM UTC by comment:8
Sorry, mine is the previous comment#7 and I pasted a wrong link. Here's my solution that worked http://jsfiddle.net/Mdv8e/63/
Changed September 26, 2011 01:04PM UTC by comment:9
I don't think this is a webkit bug at all. If you properly clear the float with .foo { overflow: hidden; } or applying a clearfix, it works fine.
here is my site if you want to see it in action..
http://for-instance.net/