Font antialiasing broken with animations with z-index on retina displays
Reported by
m...@sampotts.me,
Nov 5 2016
|
|||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.87 Safari/537.36 Steps to reproduce the problem: 1. Create an element with z-index over 1 and -webkit-font-smoothing: antialiased 2. Add animation to element that includes a transform 3. View on a retina device (tested on iMac 5K) What is the expected behavior? The font-smoothing should be maintained before, during and after the animation occurs. What went wrong? The font smoothing is lost after the animation is completed. All test elements have the same font weight and font smoothing applied but the animated element has the font smoothing removed after animation. This is also observed in Chrome Canary. Transitions seem unaffected. Did this work before? N/A Chrome version: 54.0.2840.87 Channel: stable OS Version: OS X 10.11.6 Flash Version: Shockwave Flash 23.0 r0 Here's a demo: https://jsfiddle.net/SamPotts/y9b78ync/1/ Screencast: http://recordit.co/VXqaPL8ESL
,
Nov 8 2016
,
Nov 8 2016
,
Nov 13 2016
M52 regression from GPU raster (http://crrev.com/391655). To me the symptom looks more like an incorrect font weight, or stroking the glyphs somehow. The "Animated" text is thicker, but still antialiased. @ericrk, can you take a look or reassign as needed?
,
Nov 13 2016
You're right, it's still antialiased but the weight is wrong somehow. For completeness, I've added subpixel and no antialiased text examples to another demo: https://jsfiddle.net/SamPotts/v5tpm2mk/
,
Nov 14 2016
,
Nov 14 2016
This appears to be a difference between distance field font rendering and non-DF. On retina, if you just run a simple page (http://output.jsbin.com/bozeqaqeli) with --disable-distance-field-text and --enable-distance-field-text, the difference is pretty clear, see attached images. The difference appears to be made worse by enabling antialiasing on fonts (-webkit-font-smoothing: antialiased;). Note that this doesn't happen on non-retina, so there appears to be some interaction between DF fonts and scaling. bsalomon@, can you take a look? Thanks!
,
Nov 14 2016
,
Dec 22 2016
Jim has made some improvements to distance fields recently. I'm not sure if that will have helped in this case or not. Assigning to Jim to look at after the holiday.
,
May 24 2017
I think this has been fixed by my previous changes. I don't see it on my Retina Mac, nor on my Windows machine with 2x scale. |
|||||||||
►
Sign in to add a comment |
|||||||||
Comment 1 by m...@sampotts.me
, Nov 7 2016