Bug Tracker

Ticket #8627 (closed bug: fixed)

Opened 4 years ago

Last modified 10 months ago

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

Reported by: scott.gonzalez Owned by: mikesherov
Priority: low Milestone: 1.8
Component: effects Version: 1.5.1
Keywords: Cc:
Blocking: Blocked by:

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

Change History

comment:1 Changed 4 years ago by addyosmani

  • Status changed from new to open
  • Component changed from unfiled to effects

comment:3 Changed 4 years ago by gnarf

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

comment:4 Changed 4 years ago by mikesherov

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.

comment:5 Changed 4 years ago by mikesherov

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

comment:6 Changed 4 years ago by mikesherov

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;
Last edited 4 years ago by mikesherov (previous) (diff)

comment:8 Changed 3 years ago by gnarf

  • Owner set to gnarf
  • Status changed from open to assigned

comment:9 Changed 3 years ago by anonymous

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.

comment:10 Changed 3 years ago by scott.gonzalez

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

comment:11 Changed 3 years ago by mikesherov

  • Owner changed from gnarf to mikesherov
  • Priority changed from undecided to low
  • Milestone changed from 1.next to 1.8

comment:13 Changed 3 years ago by Mike Sherov

  • Status changed from assigned to closed
  • Resolution set to fixed

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

Changeset: b9b87d53c681a8337cdbdbe81f8f4e577e5ec277

comment:14 Changed 10 months ago by dmethvin

See also #14792

Note: See TracTickets for help on using tickets.