Skip to main content

Bug Tracker

Side navigation

#8627 closed bug (fixed)

Opened March 24, 2011 08:56PM UTC

Closed June 06, 2012 11:04PM UTC

Last modified March 04, 2014 01:59AM UTC

.animate() fails on letterSpacing in IE (regression in 1.5.1)

Reported by: scottgonzalez Owned by: mikesherov
Priority: low Milestone: 1.8
Component: effects Version: 1.5.1
Keywords: Cc:
Blocked by: Blocking:
Description

.animate({ letterSpacing: 50 }) worked in previous versions but stopped working in 1.5.1. I believe it is trying to animate from "normal" to 50 now. The commit that caused this change is 85d9343271da85fc945bf37a604873eaf247a3a7

jQuery UI bug: http://bugs.jqueryui.com/ticket/7186

Attachments (0)
Change History (14)

Changed March 24, 2011 10:30PM UTC by addyosmani comment:1

component: unfiledeffects
status: newopen

Changed April 16, 2011 06:13PM UTC by addyosmani comment:2

Changed April 18, 2011 06:42AM UTC by gnarf comment:3

This doesn't seem that hard to fix... http://jsfiddle.net/gnarf/bkd4S/1/

Although making a cssHook for this is probably overkill, adding "normal" to the "convert to zero" list in https://github.com/jquery/jquery/commit/85d9343271da85fc945bf37a604873eaf247a3a7/#L0R344 might be the better solution...

Changed June 17, 2011 03:25AM UTC by mikesherov comment:4

might be worth it to create a map of properties to zeroable values. Blindly converting "normal" to zero would produce unexpected results for font-weight (which has "normal" interpreted as 400, not 0: http://www.w3schools.com/css/pr_font_weight.asp) and other css attributes that have default values of "normal" that don't translate to 0.

Changed June 17, 2011 12:14PM UTC by mikesherov comment:5

here's a good list of css properties with initial values, just in case we want to make a map of properties that have text values that can be converted to float values. http://www.w3.org/TR/CSS21/propidx.html

Changed June 17, 2011 12:54PM UTC by mikesherov comment:6

_comment0: from that list, it seems that there are really only a few properties that have default "normal" values that make sense to animate. Here's the list, with both what the "normal" value means, and the corresponding value when you get the computed value instead of the style value: \ \ font-weight: 400 computed: unclear from the spec \ letter-spacing: 0 (unless in a justified text block) computed: normal \ word-spacing: 0 computed: 0 \ line-height: depending on vendor 1.0-1.2 (which is a multiplier of the font size of the text this applies to) computed: normal \ \ Seems that despite the caveats, we would have to make a map. Browser functionality doesn't seems to return useful values for neither the style property nor the computed value. \ \ could be something like: \ \ {{{ \ var cssNormalTransform = { \ letterSpacing : 0, \ fontWeight: 400, \ wordSpacing: 0, \ lineHeight : 1 \ }; \ var parsed, r = jQuery.css( this.elem, this.prop ); \ if( r === "normal" && cssNormalTransform[this.prop] ){ \ return cssNormalTransform[this.prop]; \ } \ return isNaN( parsed = parseFloat( r ) ) ? !r || r === "auto" ? 0 : r : parsed; \ }}} \ 1308315310495182

from that list, it seems that there are really only a few properties that have default "normal" values that make sense to animate. Here's the list, with both what the "normal" value means, and the corresponding value when you get the computed value instead of the style value:

font-weight: 400 computed: unclear from the spec
letter-spacing: 0 (unless in a justified text block) computed: normal
word-spacing: 0 computed: 0
line-height: depending on vendor 1.0-1.2 (which is a multiplier of the font size of the text this applies to) computed: normal

Seems that despite the caveats, we would have to make a map. Browser functionality doesn't seems to return useful values for neither the style property nor the computed value.

could be something like:

var cssNormalTransform = {
 letterSpacing : 0,
 fontWeight: 400,
 wordSpacing: 0,
 lineHeight : 1
};
var parsed, r = jQuery.css( this.elem, this.prop );
if( r === "normal" && cssNormalTransform[this.prop] ){
 return cssNormalTransform[this.prop];
}
return isNaN( parsed = parseFloat( r ) ) ? !r || r === "auto" ? 0 : r : parsed;

Changed June 23, 2011 11:22AM UTC by gnarf comment:7

Changed September 19, 2011 02:37PM UTC by gnarf comment:8

owner: → gnarf
status: openassigned

Changed April 26, 2012 05:27PM UTC by anonymous comment:9

Almost a year since this ticket has been opened, any updates? We've been stuck with jQuery 1.4.4 because of this regression issue.

Changed April 26, 2012 05:31PM UTC by scottgonzalez comment:10

@anonymous: You know you can upgrade and define a custom hook for letterSpacing, right? http://jsfiddle.net/gnarf/bkd4S/1/

Changed May 13, 2012 09:48PM UTC by mikesherov comment:11

milestone: 1.next1.8
owner: gnarfmikesherov
priority: undecidedlow

Changed May 26, 2012 04:51AM UTC by mikesherov comment:12

Changed June 06, 2012 11:04PM UTC by Mike Sherov comment:13

resolution: → fixed
status: assignedclosed

Less letterSpacing .animate() fail in IE. Fixes #8627

Changeset: b9b87d53c681a8337cdbdbe81f8f4e577e5ec277

Changed March 04, 2014 01:59AM UTC by dmethvin comment:14

See also #14792