Skip to content

fix(mobile): CJK in <select> + emoji in warn-hint on iOS 26#93

Merged
attson merged 1 commit into
mainfrom
fix/mobile-select-and-emoji-fonts
Jun 2, 2026
Merged

fix(mobile): CJK in <select> + emoji in warn-hint on iOS 26#93
attson merged 1 commit into
mainfrom
fix/mobile-select-and-emoji-fonts

Conversation

@attson
Copy link
Copy Markdown
Owner

@attson attson commented Jun 2, 2026

Follow-up to #92. Two leftover `[?]` boxes on iOS 26 MobileSetup:

  1. Language `` showed "跟随系统" as four boxes. The control inherited `--font-mono` which had `ui-monospace` first — same iOS 26 short-circuit bug as `-apple-system`. "⚠" icon in the insecure-mode hint rendered as a box because no font in our stack covers `U+26A0`. Fix `--font-mono` now puts `PingFang SC` first (mirrors `--font-sans`). New `--font-mono-strict` keeps the ASCII-only mono look for URL/token `` fields that benefit from a real monospace.
  2. `MobileSetup`: `` → mono-strict, `` → sans. `Apple Color Emoji` added to `--font-sans` + `index.capacitor.html` inline stack. Test plan [x] 644 vitest pass [x] vue-tsc clean [x] capacitor build clean [ ] manual: rebuild iOS app, MobileSetup language picker + ⚠ icon both render correctly

Follow-up to #92. Two leftover [?] boxes on iOS 26 MobileSetup:

1. Language <select> showed "跟随系统" as four boxes. The control
   inherited --font-mono which had ui-monospace first — same iOS 26
   short-circuit-on-claim bug as -apple-system.
2. The "⚠" warning icon rendered as a box, in both MobileSetup's
   warn-hint and InsecureBanner's header. Adding U+FE0F (variation
   selector-16) to request emoji presentation did not help — iOS 26
   simulator's Apple Color Emoji still produced a missing-glyph box.

Changes:
- Reorder --font-mono to put PingFang SC first (mirrors --font-sans).
- Add --font-mono-strict for ASCII-only URL/token inputs that want a
  real monospace look.
- MobileSetup: <input> uses mono-strict, <select> uses sans.
- Add "Apple Color Emoji" to --font-sans + index.capacitor.html
  inline stack — helps in environments where emoji rendering works.
- Replace the U+26A0 emoji in MobileSetup's warn-hint and the
  InsecureBanner head with a lucide-style inline SVG. Removes the
  font-dependency entirely; icon now renders on any platform.
@attson attson force-pushed the fix/mobile-select-and-emoji-fonts branch from a62f29d to e647767 Compare June 2, 2026 14:33
@attson attson merged commit b8f1e9b into main Jun 2, 2026
7 checks passed
@attson attson deleted the fix/mobile-select-and-emoji-fonts branch June 2, 2026 14:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant