I have just launched a site on behalf of a client using the Aurora theme, and have noticed post-launch, that there are inconsistencies in spaces after full-stops/periods in certain blocks of text (but not all), and only on the Safari browser. This issue doesn’t appear in Google Chrome at all.
Any ideas for fixes for someone with very basic code knowledge?
Examples:
Thanks so much in advance!
Hi there, this sounds like something that would need a closer look to properly diagnose. Could you share your store link so I can review it directly and identify what’s causing the issue on Safari?
Kinda hard to tell without seeing how you output this text and what CSS rules apply to it.
Say, text-align: justify is the obvious possible reason.
Otherwise – just Google your post title and see if anything applies, like https://stackoverflow.com/questions/56065099/why-is-safari-s-default-font-tracking-letter-spacing-different-than-other-browse
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
Hello @kerrylyons
This type of Safari only issue is frequently related to the way the theme renders fonts or adds injected white space within certain text blocks, not to real typos.
First, see if those are custom rich text or metafields, because hidden HTML such as non breaking spaces can act differently in Safari. A quick solution is to normalize the spacing via CSS by setting a uniform word spacing and line height for the container that holds the problematic text.
And see if perhaps some custom font is loaded differently in Safari. Erasing font fallbacks, or reloading the font in theme settings, usually the simplest non invasive way to fix things and can fix jumping inconsistencies or spacing issues without getting too far into the code.
Safari handles text rendering differently from Chrome, particularly around word spacing and how it interprets whitespace in HTML. A few things worth checking:
First, inspect those specific text blocks in Safari dev tools and look for text-align: justify – that alone can cause uneven spacing after periods in Safari because of how it distributes whitespace differently than Chrome does.
Second, if the text is coming from the rich text editor, there’s a good chance there are hidden characters in there like (non-breaking spaces) that Safari renders differently. Copy the text out and retype it fresh in the editor rather than pasting from Word or Google Docs, which often sneaks in those characters.
If neither of those are the culprit, try adding this CSS to your theme – it tends to smooth out Safari-specific spacing quirks:
css
p, .rte {
word-spacing: normal;
-webkit-font-smoothing: antialiased;
}
You can add it under Online Store > Themes > Edit code > base.css or through the custom CSS field in the theme editor. Since it only affects word spacing and font rendering, it should be safe to add without breaking anything else.
Could you share the store URL though? Hard to pinpoint exactly which of these is causing it without seeing the actual output.
Hello @kerrylyons, the issue is clear as showing in the screenshot. Safari is rendering extra space before certain letters after periods.
In order to fix it, you need to add a small piece of CSS to your site.
* {
text-rendering: optimizeSpeed;
}
Put the above code in the end of base.css or any css file that you currently have it.
The above code tells safari to stop trying to be clever about spacing and around punctuation.
If the above code don’t work, then you need to paste the code in the css file that shared below:
p, h1, h2, h3, h4, h5, h6 {
word-spacing: normal;
letter-spacing: normal;
text-rendering: optimizeSpeed;
}
This issue happens because Safari applies typographic optimisations including smart spacing after periods that chrome ignores.