Text-Squashing (in Safari 11)

[wottpal]

(This could be a Safari bug, I am not sure at all.)

I have a small container with a max-width applied and a monospaced font. When I enable the kirby-typography plugin (with just smartypants it works fine) the text looks squashed:

How can I debug this or do you have any idea? Dennis

[mundschenk-at]

Looks like a webkit bug, yes. You can try changing various CSS properties for the element to see what combination triggers it.

[wottpal]

I've tried that the only thing which seems to solve it is either removing the monospaced font or the max-width :(

This is a live-version of it (scroll to the bottom in Safari 11): http://beta.wottpal.com/normannenhaus/

[fabianmichael]

Yes … really looks like a Safari-Bug :-( My first guess was, that is has sth. to do with the soft hyphens inserted by Kirby Typography (­). But if I change the font-family on your page to just monospace, it works without any problems. So it seems that Safari has a problem with your font file. Maybe you could try to re-compile the font file or use another one for testing.

Or if nothing else helps (or you need a quick-and-dirty solution), do browser-sniffing for Safari and remove als soft hyphens from all containers which use the monospace font. It may feel dirty, but this is clearly a bug in Safari or you font file is corrupted in a way that no other browser cares about.

[mundschenk-at]

@wottpal Abhängig davon wie die Box generiert würde, würde ich das umgebende Tag die Ausnahmeliste hinzufügen (über die ID oder Klasse). Es handelt sich offensichtlich um einen Safari-Bug in Zusammenspiel mit Source Code Pro. Alternativ kann man diesen Font aus font-family für Safari entfernen, dann tritt der Fehler auch nicht auf.

Sorry, here's the English translation: Depending on how the box is generated, the surrounding tag could be added to the exceptions list (via id or class). It's obviously a Safari bug in conjunction with Source Code Pro. Alternatively, this font can be removed from the Safari font-family, then the rendering looks normal as well.

[wottpal]

So I've had time now to bypass this odd Safari 11 bug. I've done it by re-saving my font files with http://transfonter.org and everything works as expected now. Thanks for your help!

And while converting the files I've noticed that I haven't subsetted them yet, so now I am saving around 50kb (only with the two .woff2-files) 🎊🎉