[bug report] Unicode characters with "variation selectors" are not rendered in the iPhone Safari browser (webkit) with iOS 17.3

Environment: iPhone 14/15, iOS 17.3

Description: Unicode characters with "Variation Selectors Supplement" code can be rendered correctly in all iPhone before iOS 17.3 . But in iOS 17.3, these characters become "blank" in iPhone.

Fonts with Variation Selectors are used for displaying alternative Chinese characters reprensenting different pronoucation and different stroke styles.

Screen capture from an issue case in iOS 17.3 (bad):

Screen capture from a good case in other OS (good):

Reproduce steps:

  1. Download a "Variation Selectors" supported TTF font

https://github.com/ButTaiwan/bpmfvs/releases/download/v1.400/BpmfZihiKaiStd.zip

  1. Unzip the ttf font file "BpmfZihiKaiStd-Regular.ttf" from the zip to a folder

  2. In the same folder, create an file "index.html" with the following content:

<head>
<meta charset="utf-8">
<style>
@font-face { font-family: zihaibpmf; src: url('BpmfZihiKaiStd-Regular.ttf'); }
</style>
</head>
<body>
<table class="redboder" border>
<tr><td>
Unicode Text
</td><td style="font-family:zihaibpmf;">一</td><td style="font-family:zihaibpmf;">一󠇡</td><td style="font-family:zihaibpmf;">一󠇢
</td></tr><tr><td>	 
Unicode Hex Code</td><td>
0x4E00</td><td>0x4E00 0xE01E1</td><td>0x4E00 0xE01E2
</td></tr>
</table>
</body>
  1. Upload the files to a web server

  2. Browser the "index.html" with an iOS 17.3 iPhone 14 or 15

  3. There should be a character displayed in each table cells. But with iOS 17.3, two of the cells are blank.

Reference: opensource IVS TTF font github: "BpmfZihiKaiStd" TTF Font file download : https://github.com/ButTaiwan/bpmfvs/releases/download/v1.400/BpmfZihiKaiStd.zip

"Variation Selectors Supplement" is supported by all other OS (Windows, Android, Linux, old iOS, macOS), see :

wiki : Variation Selectors Supplement https://en.wikipedia.org/wiki/Variation_Selectors_Supplement

wiki : Variant form (Unicode) https://en.wikipedia.org/wiki/Variant_form_(Unicode)

...Variation Selectors Supplement is a Unicode block containing additional variation selectors beyond those found in the Variation Selectors block. These combining characters are named variation selector-17 (for U+E0100) through to variation selector-256 (U+E01EF), abbreviated VS17 – VS256.

Answered by JeffYeh in 781733022

I've encountered the same issue.

After testing, we found that running 17.4 (Beta1 ~ RC) on the simulator works fine.

Xcode 15- Beta and iOS 17.4 can be found in: https://developer.apple.com/download/all/

Maybe this problem has been resolved in iOS 17.4?(Running 17.4 RC on an actual iPhone 15 also displays correctly.)

Hope this information is helpful to you.

I've just run across this myself, I think. It's certainly a selector bug that makes things vanish.

For me, it's the selector \FE0E to force a text presentation (monochrome) of an emoji character. For the icon font I made, I chose to use symbols that already had meanings that matched the icons I was creating. This was not only done with fallbacks in mind, but for accessibility.

For example, on every other OS and platform, \1F6D2\FE0E renders my monochrome symbol for a shopping cart. This works even on webkit compiled for Linux and Windows, and even on Safari in MacOS. I tried it out on browserstack and the vanishing bug seems to have popped up as far back as 17.2.1, it's certainly not there for 17.1 or iOS versions before 17. And the bug is still there for 17.3.1.

I wonder if there are any CSS Selector hacks to identify iOS17+. I hate to add UA sniffing JS just for this bug. Hopefully it's short lived.

Accepted Answer

I've encountered the same issue.

After testing, we found that running 17.4 (Beta1 ~ RC) on the simulator works fine.

Xcode 15- Beta and iOS 17.4 can be found in: https://developer.apple.com/download/all/

Maybe this problem has been resolved in iOS 17.4?(Running 17.4 RC on an actual iPhone 15 also displays correctly.)

Hope this information is helpful to you.

Good news: Just updated to iOS17.4 and the bug is gone.

This isn't working for the Variation Selector-15 (U+FE0E) for all the characters.

Can you please apply that variation selector to all your Unicode characters?

I) Steps to reproduce the issue:

  • navigate in safari to the page https://eurovot.com/vs.htm

II) Expected result:

  • as the 1st column of characters have the Variation Selector-15 (U+FE0E) applied, and the 2nd column have the Variation Selector-16 (U+FE0F) applied, the first column should always display orange characters and the second column emoji characters.

III) Error result:

  • some characters are working fine in the 1st column and displayed as text in orange colour, but some other aren't displayed as text, but displayed as emojis instead.
[bug report] Unicode characters with "variation selectors" are not rendered in the iPhone Safari browser (webkit) with iOS 17.3
 
 
Q