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: |
Description
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
Attachments (0)
Change History (6)
Changed October 07, 2011 01:31AM UTC by comment:1
| status: | new → open |
|---|
Changed October 13, 2011 04:15AM UTC by comment:2
| component: | unfiled → effects |
|---|---|
| priority: | undecided → low |
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 http://www.clugnut.com/blog/2228.
Changed July 25, 2012 01:18AM UTC by comment:4
| resolution: | → cantfix |
|---|---|
| status: | open → closed |
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 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 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.
Changed July 27, 2012 12:29PM UTC by 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.
Simpler test case: http://jsfiddle.net/dmethvin/YcCck/