From 240af563ace73253733a48df0e43703ab59d2f8d Mon Sep 17 00:00:00 2001 From: Daniel Barber Date: Sun, 20 Oct 2019 23:05:54 -0400 Subject: [PATCH] Tweak font size and fix font scaling in Safari Safari does not resize the text as the viewport is resized. This hack gets around that by forcing a repaint on every frame. This does not seem to impact the browsers CPU usage at all. One interesting issue is that Safari snaps the font sizes to the nearest pixel size, so the font sizes tend to jump around a little, rather than scaling smoothly like Firefox/Chrome. --- assets/sass/elements/_html.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/assets/sass/elements/_html.scss b/assets/sass/elements/_html.scss index 3dca4193..0fcec110 100644 --- a/assets/sass/elements/_html.scss +++ b/assets/sass/elements/_html.scss @@ -2,7 +2,7 @@ html { background-color: $background-color; color: $text-color; font-family: $body-font-family; - font-size: calc(0.85vmin + 13px); + font-size: calc(1vmin + 13px); font-style: normal; font-weight: 300; line-height: 1.4; @@ -12,3 +12,13 @@ html { color: $text-color-dark; } } + +_:default:not(:root:root), +html { + animation: webkitfix 1s forwards infinite; +} +@-webkit-keyframes webkitfix { + 100% { + z-index: auto; + } +}