Bug 291833 – iOS Safari Garbles UTF-8 Chinese Characters in <pre>.textContent for Directly Loaded JSON Files, Breaking JSON Parsing

• Component: DOM
• Status: RESOLVED DUPLICATE

Created attachment 474987 [details]
JSON that fails to parse correctly on iOS

Summary
iOS Safari incorrectly decodes UTF-8 Chinese characters when accessing `document.querySelector('pre').textContent` for a `<pre>` element containing a raw JSON file loaded directly (e.g., https://ajsonviewer.browserutils.com/encoding-bug.json). The issue is particularly pronounced when the system language is set to Chinese Simplified, where characters are garbled with replacement characters (e.g., `178漫画网-幕惜` becomes `178婕敾缃�-骞曟儨` with `�`). In English, the garbling produces Latin-1 encoded sequences (e.g., `178漫画网-幕惜`). This corruption introduces invalid JSON syntax, causing `JSON.parse` to fail with errors like `SyntaxError: Unrecognized token '\'` or `SyntaxError: Expected '}'`.

The JSON file renders correctly in iOS Safari’s browser display (e.g., `178漫画网-幕惜`, `分类` appear as expected). The bug is specific to the `textContent` property when accessing JSON loaded directly. When the same JSON is fetched programmatically (e.g., via `fetch`) and set to `<pre>.textContent`, or embedded in an HTML `<pre>` element, the characters are decoded correctly, and parsing succeeds. The issue does not occur in macOS Safari, where `textContent` returns the correct text regardless of language settings.

Steps to Reproduce
1. On an iOS device (e.g., iPhone with iOS 18):
   - Set the system language to Chinese Simplified (Settings > General > Language & Region > Add Language... > Chinese, Simplified).
   - Open the raw JSON file in iOS Safari: https://ajsonviewer.browserutils.com/encoding-bug.json.
   - (also available as attachment to the bug report)
   - Verify that the browser displays correct Chinese characters (e.g., `178漫画网-幕惜`, `分类`, `连载中`).
   - Open the Web Inspector console (via a Mac: Safari > Develop > Your Device) and run:
     ```javascript
     const preElement = document.querySelector('pre');
     const content = preElement?.textContent;
     console.log('Content:', content);
     try {
       JSON.parse(content);
       console.log('Parsed successfully');
     } catch (e) {
       console.error('Parse failed:', e);
     }

Observe the garbled text in the console (e.g., 178婕敾缃�-骞曟儨 for bookSourceName, 鍒嗙被 for 分类) and the parse error (e.g., SyntaxError: Unrecognized token '\').
Change the system language to English (Settings > General > Language & Region > iPhone Language > English).
Reload the JSON file, verify correct display, and rerun the console code, noting different garbling (e.g., 178漫画网-幕惜, 查分类 for 分类).

2. Testing with an HTML file that fetches the JSON it has the correct behavior:
https://ajsonviewer.browserutils.com/correct-example.html
(correct-example.html attachment)

Expected Results
Accessing <pre>.textContent for a directly loaded JSON file (https://ajsonviewer.browserutils.com/encoding-bug.json) should return valid JSON with correct Chinese characters (e.g., 178漫画网-幕惜, 分类, 连载中), matching the browser’s rendered display.
JSON.parse(content) should succeed, logging Parsed successfully.
The behavior should be consistent across system language settings (Chinese Simplified, English) and match macOS Safari, where textContent is correct.

Actual Results
In iOS Safari (direct JSON file load, e.g., https://ajsonviewer.browserutils.com/encoding-bug.json):
The browser renders the JSON correctly (e.g., 178漫画网-幕惜, 分类).
Accessing <pre>.textContent via JavaScript produces garbled text:
Chinese Simplified System Language: Replacement characters and garbled Unicode (e.g., 178婕敾缃�-骞曟儨, 鍒嗙被 for 分类).
English System Language: Latin-1 encoded sequences (e.g., 178漫画网-幕惜, 查分类 for 分类).
JSON.parse(content) fails with errors like SyntaxError: Unrecognized token '\' or SyntaxError: Expected '}'.
In iOS Safari (test HTML with fetch):
Fetching the JSON and setting <pre>.textContent results in correct Chinese characters.
JSON.parse succeeds, logging Parsed successfully.
In iOS Safari (HTML with embedded JSON):
Embedding the JSON in a <pre> element (e.g., <pre>[{ "bookSourceName": "178漫画网-幕惜" }]</pre>) and accessing textContent works correctly, with no garbling.
In macOS Safari:
<pre>.textContent for direct JSON loads is correct (e.g., 178漫画网-幕惜, 分类) in both language settings.
JSON.parse succeeds.

Created attachment 474988 [details]
Example of using fetch works correctly

[Alexey Proskuryakov]

Thank you for the report. Could you please clarify the impact? This seems like something that can only be possibly reached through Web Inspector, so it affects debugging, but not end user experience. Is that correct?

[Alexey Proskuryakov]

> The JSON file renders correctly in iOS Safari’s browser display (e.g., `178漫画网-幕惜`, `分类` appear as expected). The bug is specific to the `textContent` property when accessing JSON loaded directly. When the same JSON is fetched programmatically (e.g., via `fetch`) and set to `<pre>.textContent`, or embedded in an HTML `<pre>` element, the characters are decoded correctly, and parsing succeeds. The issue does not occur in macOS Safari, where `textContent` returns the correct text regardless of language settings.

I don't think that this description is accurate. In my testing, the displayed document is incorrect, and textContent accurately reflects that. That's a known issue.

*** This bug has been marked as a duplicate of bug 197369 ***

(In reply to Alexey Proskuryakov from comment #2)
> Thank you for the report. Could you please clarify the impact? This seems
> like something that can only be possibly reached through Web Inspector, so
> it affects debugging, but not end user experience. Is that correct?

Thank you for reviewing this report and for your question about the impact.

This bug impacts Chinese users of my Safari extension, Advanced JSON Viewer, on iOS in Chinese Simplified mode.

The extension uses `document.querySelector('pre').textContent` and `JSON.parse()` to process JSON files (e.g., https://ajsonviewer.browserutils.com/encoding-bug.json). Garbled text (e.g., `178婕敾缃�-骞曟儨`) leads to failure with errors like `SyntaxError: Unrecognized token '\'`s, breaking the viewer.

Happy to provide more details!

[Alexey Proskuryakov]

Thank you for this information. Yes, pretty certain that we'll need to fix bug 197369 for this.