Pretty Ideas

A tale of webkit, canvas and REM units

April 20, 2020

Two months back, I was working with ChartJS to render a very simple pie chart. Everything was smooth until one of our UX design expert who has eagle eyes found out that the label inside the pie chart was not of the same size in Safari as compared to other browsers.

Well, I took a sigh of relief, it wasn’t IE. Next, I took some time to figure out why the pie chart looks so illogical because of the miniature fount.

Problem was not with Safari but in webkit(the rendering engine that powers the famous Safari).

Well, what’s the solution then? A hack and a bug raised on wekbit. :)

See the codepen below

Open this page in Safari and compare the result.

I intentionally increased the font size to make it more obvious.

Find the bug report here


Ashish Santikari

by Ashish Santikari.

© 2021, Built using Gatsby with