среда, 19 июля 2017 г.

A couple of days ago, my installation of Google Chrome updated itself from version 49 to version 50. The timing was fortuitous and relieved me of a growing headache.



A few days before the update I had been looking closely at how a draft of [my book](http://book.webtypography.net) was rendering in browsers on my Macbook (non-Retina, running OS X 10.11.4 El Capitan). I was confused to see that Chrome was rendering text much lighter than Safari:





![Screenshots of Chrome 49 and Safari](/images/2385/safari-chrome49.png)

left: Chrome 49; right: Safari




My immediate thought was that for some reason Chrome was using greyscale anti-aliasing while Safari was rendering with subpixel-antialiasing as per its default. To verify this I changed Safari’s rendering to greyscale using:



-webkit-font-smoothing: antialiased



As expected this lightened Safari’s text rendering and to the naked eye made the text look the same grade as in Chrome. I don’t approve of turning off subpixel-aliasing – I believe [it’s there for a reason](http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/) – so I tried forcing subpixel-antialising in Chrome with



-webkit-font-smoothing: subpixel-antialiased;



but it had no effect, so I tried to find out why Chrome was using greyscale smoothing.



I use Chrome as my everyday browser. I don’t often open Safari on my laptop. Somehow it had escaped my attention that text everywhere on the web was being rendered lighter in Chrome, and not because it was using greyscale smoothing. In fact Chrome was still using subpixel-antialiasing almost everywhere, including on my book page, as a closer inspection eventually revealed:





![Zoomed rendering in Chrome 49](/images/2385/chrome49-zoom.png)

![Zoomed rendering in Safari](/images/2385/safari-zoom.png)

Coloured subpixels in Chrome 49 (left) and Safari (right)




That was even more confusing, but at least it gave me a different vector of investigation. I duly uncovered this bug report in Chromium: [Font rendering is lighter than Safari / Firefox on OS X El Capitan](https://bugs.chromium.org/p/chromium/issues/detail?id=541846). In turns out Firefox had a similar bug reported: [Text is thin on OS X](https://bugzilla.mozilla.org/show_bug.cgi?id=1230366). These two reports combined seemed to explain everything. Safari uses Apple’s proprietary Core Text for rendering text. Chrome and Firefox (and Opera) all use the [Skia Graphics Library](https://skia.org/). The way Skia was being used to render text meant that text ended up lighter in weight than with Safari’s use of Core Text.



Less than an hour after I finally pieced that together, Chrome updated itself with a fix that changed the way text rendered and the problem went away. Text is still a slightly lighter grade in Chrome than Safari and Firefox, but not problematically so:





![Screenshots of Chrome 50 and Safari](/images/2385/safari-chrome50.png)

left: Chrome 50; right: Safari




Thank you Blink and Gecko contributors for caring enough to notice and fix this issue.


Read or add comments



Комментариев нет:

Отправить комментарий