Bug Tracker

Opened 9 years ago

Closed 8 years ago

Last modified 8 years ago

#6409 closed bug (invalid)

fadeTo and animate work not correctly with opacity in Linux Chrome and Chromium

Reported by: Leolik Owned by: Leolik
Priority: undecided Milestone:
Component: effects Version: 1.4.2
Keywords: Cc:
Blocked by: Blocking:


If, in Linux Chrome or Chromium, tag have opacity 0.3 (for example) and you change it to 0.3 again, with fadeTo() or animate() - opacity changed to 0 and after this again changed to 0.3 - thats not correct. Sorry for my English.

Change History (12)

comment:1 Changed 9 years ago by mvrilo

Just noticed that issue on Google Chrome 5.0.342.9 beta - Debian Lenny (2.6.26-2-686 GNU/Linux).

comment:2 Changed 8 years ago by snover

Milestone: 1.4.3

Resetting milestone to future.

comment:3 Changed 8 years ago by addyosmani

Owner: set to Leolik
Priority: undecided
Status: newpending

Please submit a complete test case that reproduces this issue on jsFiddle so that we can fully investigate the issue you were experiencing.

comment:4 Changed 8 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

comment:5 Changed 8 years ago by anonymous

Issue still exists: http://jsfiddle.net/X43SS/

comment:6 Changed 8 years ago by anonymous

And still on Linux Chrome 6.0.472.63


comment:7 Changed 8 years ago by anonymous

Seems like any subsequent call to fadeTo() (after the initial one) on given element starts with opacity at 0.

comment:8 Changed 8 years ago by KamilSzot

This bug is caused by the fact that animate() assumes px unit for all values where unit is not given. Linux Chrome seems to be offended by that in case of opacity. After adding special case for opacity everything works properly.

Patch for jQuery 1.4.4 that does just that:

<                                               e.custom( start, end, name != "opacity" ? unit : "" );
>                                               e.custom( start, end, unit );

and same patch but for src/effects.js file in jQuery GIT:

<                                               e.custom( start, end, unit );                                                                                                                                                                                                  
>                                               e.custom( start, end, name != "opacity" ? unit : "" );                                                                                                                                                                         

I also forked jQuery at github applied this patch and made a Pull request. https://github.com/KamilSzot/jquery/commit/53b7d87f056fb03dc39a33513a4ac9106c36a28a

comment:9 Changed 8 years ago by KamilSzot

I made a mistake during testing and those patches do not fix the problem. Also assuming px unit does no harm as there is special case for opacity in jQuery.fx.step

comment:10 Changed 8 years ago by KamilSzot

I think I've found the real cause. It's bug in Chrome. I've filed the issue there: http://code.google.com/p/chromium/issues/detail?id=69180

comment:11 Changed 8 years ago by KamilSzot

You can work around the bug by replacing line:

		var r = parseFloat( jQuery.css( this.elem, this.prop ) );


		var r = parseFloat( jQuery.css( this.elem, this.prop ).replace(",", ".") );
Last edited 8 years ago by KamilSzot (previous) (diff)

comment:12 Changed 8 years ago by KamilSzot

Below is much more elegant workaround, that I can use with standard minified release version of jQuery.

Just put it your code before using opacity animation:

			var standardOpacityHook = jQuery.cssHooks.opacity.get
			jQuery.cssHooks.opacity.get = function( elem, computed ) {
				return standardOpacityHook(elem, computed).replace(",", ".");
Note: See TracTickets for help on using tickets.