Skip to main content

Bug Tracker

Side navigation

#10366 closed bug (cantfix)

Opened September 28, 2011 02:44PM UTC

Closed July 25, 2012 01:18AM UTC

Last modified July 27, 2012 12:29PM UTC

animate() does not work for font-weight

Reported by: SineSwiper Owned by:
Priority: low Milestone: None
Component: effects Version: 1.6.4
Keywords: Cc:
Blocked by: Blocking:

The animate command does not work for font-weight, even if it is set to numeric values. In Firefox, the change doesn't happen until you edit the HTML. In IE8, it flat out doesn't work because of this error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2;
.NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MDDR;
InfoPath.2; .NET4.0C; MS-RTC LM 8)
Timestamp: Wed, 28 Sep 2011 14:41:21 UTC

Message: Could not get the fontWeight property. Invalid argument.
Line: 4
Char: 20686
Code: 0

I have a test case here:

Attachments (0)
Change History (6)

Changed October 07, 2011 01:31AM UTC by dmethvin comment:1

status: newopen

Changed October 13, 2011 04:15AM UTC by dmethvin comment:2

component: unfiledeffects
priority: undecidedlow

Changed November 01, 2011 07:03PM UTC by comment:3

This bug may be caused by most browsers' inability to render the font-weight property on such a fine-grained scale. Specifically, it appears that most browsers are unable to distinguish font-weights within the 100-point scale (and are only able to render 1 of 2 weights, i.e. normal and bold). See

Changed July 25, 2012 01:18AM UTC by dmethvin comment:4

resolution: → cantfix
status: openclosed

This isn't us. Here's an example where I tried several things:

You can see that we're animating the property by removing the comment. I tried rounding to an integer, and also to the nearest 100. Nothing made the font weight truly animate in Chrome, Firefox, Safari, or IE9.

Changed July 27, 2012 11:58AM UTC by SineSwiper comment:5

Actually, the Math.round is working. The key detail is when it changes to non-bold before it says "Done!" Without Math.round, the browser thinks them as illegal values, and thus only changes the weight on the final set of 100.

It's a shame that even with given a Light font, the browsers don't seem to use it. (See But, we can at least fix the "two-scale" problem here.

I would go ahead and put in the Math.round(now/100)*100 fix you have here, since technically, those are the only legal values of font-weight. That would at least solve for the edge case here where you will need the font-weight to switch to non-bold in the middle of the animation. And perhaps someday browsers will actually use those nine values.

Changed July 27, 2012 12:29PM UTC by dmethvin comment:6

You can see that even with the legal values there, the animation doesn't have an effect that most people would call smooth or pleasing. In all browsers today, the font-weight is too granular.

My assumption was that you expected a smooth font-weight animation, which we can't fix. I don't see a reason to add special-case code just to do a crappy job on one particular animation. If someone *wants* a crappy font-weight animation they can use the step function in that fiddle.