Blurred font in Safari

[lucioreyli]

I'm the only nerd at the internet using Safari, but the cheatsheet site is blurred for me. I'm using the Safari - Version 16.3 (18614.4.6.1.5) as MacOS Ventura - Version 13.2 but I was tried using Safari - Version 15.6 (15613.3.9.1.7, 15613) running in macOS Catalina - Version 10.15.7. But this problem is fixed running in another browser (I tried Mozilla Firefox and Chromium), but only Safari keeps blurred. Can someone give-me more pixels?

Safari example#1

Safari example#2

Chromium example#1 (of 1)

I don't know how fix this because it's Zola project and I'm React developer (⚛️) so I cannot do pull request (💀) but it's problably a Safari problem to caching font to optimize font loading (maybe).

[ralfbiedert]

For me even your window decoration is blurred in these screenshots :)

Since every other browser seems to work fine I think this is a Safari issue, but could you try

• (un)setting transform to scale(1.0) in body > div.page > div.page__content > div.book-content (see screenshot below)
• resizing the window so that the two columns barely fit on the screen?

[lucioreyli]

If I open "Inspect Element" works fine (because reduce the app width):

And removing transform-scale works fine too:

[ralfbiedert]

Not sure what to do, this seems to be a Safari font rendering bug w.r.t. scale. For now my recommendation would be not to hold it like that to resize the window. I'm a bit reluctant adding a workaround, as they tend to be brittle and I don't have a Safari device to test anymore.

Any other ideas?

[lucioreyli]

The zoom css property looks good to solve this problem in Safari, replacing the transform/scale property

I tested in Safari and Chromium but I don't know the behavior in Mozilla Firefox 🔥

[ralfbiedert]

Apparently this doesn't work in Firefox :(

https://caniuse.com/css-zoom

[lucioreyli]

Can we use this?

.book-content {
    -moz-transform: scale(1.05); /* property for Firefox */
    zoom: 105%; /* property others browsers */
}

because using this:

.book-content {
    transform: scale(1.05);
    zoom: 105%; 
}

can duplicate the scale in the app.

[lucioreyli]

I don't have this issue using Safari in iOS

[ralfbiedert]

Let's try this. Might have to revert if it breaks rendering in other browsers.

[ralfbiedert]

Ah, just noticed I have some trouble deploying as I'm on vacation. ETA might be a few days.