Bug Tracker

Opened 9 years ago

Closed 8 years ago

Last modified 7 years ago

#7978 closed bug (wontfix)

chrome fadein and fadeout do not work

Reported by: sun.ga2r@… 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; }

Change History (9)

comment:1 Changed 9 years ago by anonymous

here is my site if you want to see it in action..

http://for-instance.net/

comment:2 Changed 9 years ago by addyosmani

Priority: undecidedlow
Resolution: invalid
Status: newclosed

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.

comment:3 in reply to:  2 Changed 9 years ago by anonymous

http://jsfiddle.net/BZDgF/6/

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 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.

comment:4 Changed 9 years ago by jitter

Component: unfiledeffects
Resolution: invalid
Status: closedreopened
Version: 1.4.21.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".

comment:5 Changed 8 years ago by snover

This appears to be a Chrome issue with display: list-item. I can only find this bug in their db; maybe there is something in WebKit though.

comment:6 Changed 8 years ago by snover

Resolution: wontfix
Status: reopenedclosed

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:

WebKit bug Chrome bug

comment:7 Changed 8 years ago by petruchi@…

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.

comment:8 Changed 8 years ago by petruchi@…

Sorry, mine is the previous comment#7 and I pasted a wrong link. Here's my solution that worked http://jsfiddle.net/Mdv8e/63/

comment:9 Changed 8 years ago by Rob

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.

http://jsfiddle.net/YnSam/2/

Note: See TracTickets for help on using tickets.