How can I fix rendering issue on safari while using nuxt?

Question

I'm using Do Hyeon font and all browsers render fine except for Safari. It seems if text is too short or not upper case, safari ignores spaces. However, if I click or hover the text, it re-renders with space.

Does anyone know why this is happening and how can I solve this?

I already tried adding these css property but did not work.

text-rendering: optimizeLegibility;
-webkit-font-feature-settings: 'kern' 1;

(Second picture) When I selected text

No I do not see anything in console. I see text with the space in dev tool but it is just rendering without space. And when click text itself, it fixes the problem.
Test Event — Nagisa Ando, Sep 15 '21 at 19:38

score 1 · Accepted Answer · answered Sep 16 '21 at 20:42

I believe it was Safari issue but unfortunately, I could not find the reason why this is happening.

However, after testing some css properties, the one I am using for displaying ellipsis worked for this issue as well, so I will leave the code here in case someone is having the same issue.

display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
max-height: 10rem;

Again, these properties are originally for ellipsis especially for safari: https://stackoverflow.com/a/61515590/12332180 but propbably, this is related to modifing the text that is why it is working for my situation as well.

How can I fix rendering issue on safari while using nuxt?

Test Event

1 Answers1