Skip to main content

Bug Tracker

Side navigation

#6409 closed bug (invalid)

Opened April 07, 2010 08:53PM UTC

Closed December 04, 2010 08:05AM UTC

Last modified January 11, 2011 03:59AM UTC

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.

Attachments (0)
Change History (12)

Changed April 23, 2010 02:26AM UTC by mvrilo comment:1

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

Changed November 12, 2010 02:40AM UTC by snover comment:2

milestone: 1.4.3

Resetting milestone to future.

Changed November 19, 2010 07:26PM UTC by addyosmani comment:3

owner: → 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.

Changed December 04, 2010 08:05AM UTC by trac-o-bot comment:4

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!

Changed January 02, 2011 10:19AM UTC by anonymous comment:5

Issue still exists:

Changed January 11, 2011 12:57AM UTC by anonymous comment:6

And still on Linux Chrome 6.0.472.63

Changed January 11, 2011 01:04AM UTC by anonymous comment:7

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

Changed January 11, 2011 01:45AM UTC by KamilSzot comment:8

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.

Changed January 11, 2011 03:23AM UTC by KamilSzot comment:9

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

Changed January 11, 2011 03:37AM UTC by KamilSzot comment:10

I think I've found the real cause. It's bug in Chrome. I've filed the issue there:

Changed January 11, 2011 03:39AM UTC by KamilSzot comment:11

_comment0: You can work around the bug by replacing line: \ var r = parseFloat( jQuery.css( this.elem, this.prop ) ); \ with: \ var r = parseFloat( jQuery.css( this.elem, this.prop ).replace(",", ".") ); \ 1294717204319158

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(",", ".") );

Changed January 11, 2011 03:59AM UTC by KamilSzot comment:12

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(",", ".");