Bug Tracker

#14484 closed bug (migrated)

Opened October 25, 2013 09:28AM UTC

Closed October 16, 2014 06:11PM UTC

Relative percentage values (+= / -=) work in .animate but not in .css

Reported by: jwagner@digilog.de Owned by: gibson042
Priority: blocker Milestone: 1.12/2.2
Component: css Version: 1.10.2
Keywords: Cc:
Blocked by: Blocking:
Description
.css({'left':'+=50%'})

...moves the item by 50 pixel instead of 50%, while 

.animate({'left':'+=50%'})

...works as expected (adds 50%).

The docs suggest that .css and .animate should behave identically (http://api.jquery.com/css/):

''As of jQuery 1.6, .css() accepts relative values similar to .animate().''

If "similar" should really mean "similar" but not identical, it would help to give a hint in the docs that relative percentage values are not supported by .css.

The problem shows up in current Chrome, Firefox and IE10.

Fiddle to reproduce:

http://jsfiddle.net/2VGgg/

Attachments (0)
Change History (7)

Changed October 25, 2013 02:09PM UTC by timmywil comment:1

component: unfiled → css
milestone: None → 1.11/2.1
priority: undecided → blocker
status: new → open

This looks valid.

Changed November 22, 2013 06:03PM UTC by francomalatacca comment:2

Replying to [ticket:14484 jwagner@…]:

.css({'left':'+=50%'})

The problem is that ''style'' function that is called by ''css'' function doesn't care about percentage.

A fix could be by adding support for this by checking if there is the % symbol at the end of ''value''. If so it should compute the percentage of the parent width.

I fixed the bug with something


			if ( type === "string" && (ret = rrelNum.exec( value )) ) {
				// Fixes bug #14484
				if(!/[%$]/i.exec(value) ) {
					value = (( ret[1] + 1 ) *  ret[2]) + parseFloat( jQuery.css( elem, name ) );
				} else {
					value = parseFloat( jQuery.css( elem, name ) ) + (parseFloat(jQuery(elem).parent().css("width")) * (( ret[1] + 1 ) * ret[2]/100));
				}
				
				// Fixes bug #9237
				type = "number";
			}

Thanks.

Franco

Changed December 09, 2013 05:35PM UTC by gibson042 comment:3

owner: → gibson042
status: open → assigned

Changed March 03, 2014 05:42PM UTC by gibson042 comment:4

milestone: 1.11/2.1 → 1.11.1/2.1.1

Changed April 08, 2014 08:10PM UTC by anonymous comment:5

This is reproducible for other unit "em"

There are other not so popular units like "cm","in" etc.

Need fix for them too

Changed April 14, 2014 04:09PM UTC by dmethvin comment:6

milestone: 1.11.1/2.1.1 → 1.12/2.2

Changed October 16, 2014 06:11PM UTC by m_gol comment:7

resolution: → migrated
status: assigned → closed

Migrated to https://github.com/jquery/jquery/issues/1711