Bug Tracker

Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#10366 closed bug (cantfix)

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
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

I have a test case here: http://www.resonatorsoft.org/temp/test.html

Change History (6)

comment:1 Changed 11 years ago by dmethvin

Status: newopen

comment:2 Changed 11 years ago by dmethvin

Component: unfiledeffects
Priority: undecidedlow

comment:3 Changed 11 years ago by [email protected]

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 http://www.clugnut.com/blog/2228.

comment:4 Changed 11 years ago by dmethvin

Resolution: cantfix
Status: openclosed

This isn't us. Here's an example where I tried several things: http://jsfiddle.net/YcCck/7/

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.

comment:5 Changed 11 years ago by SineSwiper

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 http://jsfiddle.net/xPv5w/) 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.

comment:6 Changed 11 years ago by dmethvin

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.

Note: See TracTickets for help on using tickets.