Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Major Text Rendering Bug in macOS Safari 17.0

tasssilo

tasssilo

macrumors newbie
Original poster
May 4, 2023
17
8
Germany
Since upgrade to Safari 17.0 (macOS 14.0), double quotation marks appear in rendered html text. This is a bug in Safari rendering / character encoding.

It seems that new line returns within the html code of the text (which are usually ignored in rendering) are translated into a double quotation ".
This bug did not occur for versions < 17.0.

See images attached:

First screenshot: HTML code containing new line return, see '... kreiert. \n Das Besondere ...'

code.jpeg


Second screenshot: Safari renders this as '... kreiert."Das Besondere ...' -> Double quotation bug " showing up.
rendered.jpeg




The problem is the " appearing as a character rendering instead of ignoring \n in code (which is standard behavior for browsers).
 
Last edited by a moderator:
Nermal

Nermal

Moderator
Staff member
Dec 7, 2002
21,026
4,616
New Zealand
That, by itself, doesn't appear to be the issue (I made a test file with a newline and it worked correctly). There must be something else going on here.
 
tasssilo

tasssilo

macrumors newbie
Original poster
May 4, 2023
17
8
Germany
Thanks @Nermal
I boiled down the bug to the following "offending" html code with fonts:

HTML: 
<html>
<head>
<style>
@font-face {
    font-family:'MyriadSetPro-Text';
    src: url('https://www.wellness-heaven.de/css/fonts/MyriadSetPro-Text_gdi.eot');
    src: url('https://www.wellness-heaven.de/css/fonts/MyriadSetPro-Text_gdi.eot?#iefix') format('embedded-opentype'),
        url('https://www.wellness-heaven.de/css/fonts/MyriadSetPro-Text_gdi.woff') format('woff'),
        url('https://www.wellness-heaven.de/css/fonts/MyriadSetPro-Text_gdi.ttf') format('truetype'),
        url('https://www.wellness-heaven.de/css/fonts/MyriadSetPro-Text_gdi.svg#MyriadSetPro-Text') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
    unicode-range: U+0020-2212;
}
</style>
</head>
<body>
<div style="font-family:'MyriadSetPro-Text';">
First line
Second line
</div>
</body>

The problem in Safari seems to be the usage of .woff or .ttf fonts in combination with "unicode-range".

If I delete "unicode-range", the problem goes away. Also, if I only use the .svg font, no problem.

Any advice, how I should edit my font.css for maximum compatibility (with other browsers), without the Safari bug? Maybe just delete unicode-range?
 
tasssilo

tasssilo

macrumors newbie
Original poster
May 4, 2023
17
8
Germany
@FreakinEurekan Well, the usage of webfonts (woff, truetype) is omnipresent nowadays. And in most use cases, the unicode-range CSS descriptor is included to save bandwidth. So yes, this is a major bug, affecting the rendering of many websites. I cannot understand why the Safari team released this version 17.0 without proper testing.
 
tasssilo

tasssilo

macrumors newbie
Original poster
May 4, 2023
17
8
Germany
Hmm ... did you delete your cache? On which machine are you running Safari? Indeed, this would be strange behaviour.
My text encoding in Safari is set to "Standard".

For a quick test see jsfiddle: https://jsfiddle.net/g8s9c4jn/

Output of my code sample in Safari 17.0 is as follows:
Bildschirmfoto 2023-10-07 um 09.53.18.jpg
 
G

galad

macrumors 6502a
Apr 22, 2022
613
494
It depends if the bug is in WebKit or not. It's a rendering bug, so it's probably a WebKit issue, but it could be a bug in some macOS font frameworks too.
 
A

ab22

macrumors regular
Nov 14, 2020
176
109
Nermal said:
You're going to love this... the code sample you supplied works correctly on my machine.
Click to expand...
here too : results appear the same on Firefox, Brave, Safari 17.0 (19616.1.27.211.1) & Safari Technology Preview 17 - at least for a local html file & the jsfiddle test
 
Nermal

Nermal

Moderator
Staff member
Dec 7, 2002
21,026
4,616
New Zealand
tasssilo said:
Hmm ... did you delete your cache? On which machine are you running Safari? Indeed, this would be strange behaviour.
My text encoding in Safari is set to "Standard".

For a quick test see jsfiddle: https://jsfiddle.net/g8s9c4jn/

Output of my code sample in Safari 17.0 is as follows:
View attachment 2290525
Click to expand...
I've cleared cache and have also tested in a private window. It works correctly (both messages on a single line with no " in between) on my 2020 iMac with Safari 17.0 on OS 14.0.

View/Text Encoding is set to "Default". The default encoding under Preferences/Advanced is Western (ISO Latin 1).
 
tasssilo

tasssilo

macrumors newbie
Original poster
May 4, 2023
17
8
Germany
Strange. I tested on my MacBook Air 15 (Silicon) and Mac Studio, with all Safari extensions deactivated (and get the bug on both machines). My main system language is set to German, maybe this makes the difference.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom