Bug 180744 - Narrow no-break space has no width on recent Safari and iOS
Summary: Narrow no-break space has no width on recent Safari and iOS
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 11
Hardware: Unspecified All
: P2 Normal
Assignee: Nobody
URL: http://output.jsbin.com/rariyiwupa
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-12-13 02:30 PST by Emmanuel P
Modified: 2023-05-05 08:03 PDT (History)
9 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Emmanuel P 2017-12-13 02:30:22 PST 
Overview:
The narrow no-break space character ( ) seems to have changed behavior in recent Safari versions. On macOS Sierra and High Sierra, with Safari 10.1 and 11 ; and on iOS 10 and 11, the character has no width at all. On previous versions, the character renders correctly.

Steps to Reproduce:
- Add narrow space characters in a HTML document via the HTML entity " ". You can go to the given jsbin link to see a test case.

Actual Results:
The narrow space is seemingly not rendered. Inspecting the page via the developer tools show no space at all.

Expected Results:
The narrow space should render.

Builds and Platforms:
The bug occurs on iOS 10 and 11, in Safari and in in-apps webviews.
The bug occurs on macOS Sierra with Safari 10.1.
The bug occurs on macOS High Sierra with Safari 11.

The bug does not occur on iOS 9.
The bug does not occur on macOS El Captain 9.1.

Additional Information:
Seemingly related bug: https://bugs.webkit.org/show_bug.cgi?id=172205. Difference is in my case the text is written in french.
I tried with multiple fonts including the -apple-system one without success.
Comment 1 Radar WebKit Bug Importer 2017-12-13 07:57:04 PST 
<rdar://problem/36021002>
Comment 2 Myles C. Maxfield 2021-08-11 00:11:43 PDT 
The jsbin looks identical in Chrome, Safari, and Firefox to me. Can you verify that this bug still reproduces?
Comment 3 Myles C. Maxfield 2021-08-11 11:59:46 PDT 
(I'm testing on macOS Monterey.)
Comment 4 qlrs365c8 2023-05-05 08:01:16 PDT 
Please reopen the bug as we are facing this issue when trying to display text written in French as well. The narrow no-break space is present but has no width.

The problem occurs on Safari 15.4 (17613.1.17.1.6) under macOS Monterey version 12.3. 

However, what is strange is that the issue occurs on our application but cannot be reproduced in a JSFiddle. The issue doesn't occur under Chrome, Firefox and Edge though.
Comment 5 qlrs365c8 2023-05-05 08:03:59 PDT 
There must be something triggering the issue, maybe it happens when the locale of the website is set to French. I'm not sure what happens but something is going on for sure. We've spent hours investigating the issue to ensure the problem wasn't on our side.