CODEWITHSUNDEEP
svgsafari
Justin Grant
Justin Grant

Reputation: 46683

"jumpy" resizing of fonts inside SVG on Safari

When I put a <text> element inside an SVG file, and then the SVG image is resized, Safari resizes graphical elements smoothly but resizes fonts in a "jumpy" way. This Safari behavior makes it hard to line up text and non-text elements because the text size changes relative to the other elements as the page is resized.

Is there a workaround to force either smooth font resizing in Safari or, if that's not possible, at least to resize both fonts and non-font elements in the same jumpy way so they won't get misaligned?

The image below is an example of this. If I resize the page in Firefox or Chrome, the green, orange, and pink boxes stay in the same place relative to the text underneath. If I horizontally shrink the page in Safari so that the image is resized, the text keeps jumping around horizontally, which causes the text and the boxes to be misaligned for some browser sizes.

The image is from here: https://raw.githubusercontent.com/tc39/proposal-temporal/579788fd110e56d70a00bab5da5926cd419f995f/docs/persistence-model.svg

FWIW, the only reference I could find to this behavior is a sad, 9-year-old post complaining about the same problem. Safari / Webkit Animating Font Size is Jumpy. It's so old that Chrome had the same problem before it was forked from WebKit. ;-(

Upvotes: 1

Views: 685

Answers (2)

o17t H1H&#39; S&#39;k
o17t H1H&#39; S&#39;k

Reputation: 2744

Safari rounds font sizes to the nearest 1px... https://bugs.webkit.org/show_bug.cgi?id=46987

Upvotes: 0

Justin Grant
Justin Grant

Reputation: 46683

Aha! After experimenting with various CSS tweaks, I found an easy solution: text-rendering: geometricPrecision solves the jumpy-text-resize problem on Safari without noticeably degrading anything in Chrome or Firefox.

To explain why it works, here's what MDN says:

In SVG, when text is scaled up or down, browsers calculate the final size of the text (which is determined by the specified font size and the applied scale) and request a font of that computed size from the platform's font system. But if you request a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead. This results in stair-step scaling of text.

But the geometricPrecision property — when fully supported by the rendering engine — lets you scale your text fluidly. For large scale factors, you might see less-than-beautiful text rendering, but the size is what you would expect—neither rounded up nor down to the nearest font size supported by Windows or Linux.

Here's the updated version of the SVG image that doesn't exhibit the Safari problem. Safari still seems to have a small font-size measurement error relative to Chrome/FF (fonts are not quite the same width) but it's much better than the jumpy behavior I was seeing before.

Upvotes: 2

Related Questions