Skip to content

Commit 3164d0d

Browse files
wtheisenclaude
wtheisen
and
claude
committed
Fix SVG suit icons not rendering on iOS Safari/Chrome
Root cause: Two issues with inline SVG rendering on iOS WebKit: 1. CSS used `em` units in clamp() which iOS Safari handles poorly 2. `currentColor` inheritance fails in certain iOS contexts Fixes: - Change .suit-icon sizing from `em` to `vw` units (matches working NavBar pattern) - Replace all `fill="currentColor"` with explicit hex colors (#e8dcc4 cream, #c41e3a red) - Add xmlns="http://www.w3.org/2000/svg" attribute to all suit SVGs 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent d745e15 commit 3164d0d

File tree

7 files changed

+97
-93
lines changed

7 files changed

+97
-93
lines changed

‎docs/assets/index-CrY-RU1P.js‎

Lines changed: 55 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/index-DBAmFvu5.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/index-DE6LJ2RB.js‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

‎docs/assets/index-DX07-GvQ.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@
3737
height: 100dvh;
3838
}
3939
</style>
40-
<script type="module" crossorigin src="/assets/index-DE6LJ2RB.js"></script>
41-
<link rel="stylesheet" crossorigin href="/assets/index-DX07-GvQ.css">
40+
<script type="module" crossorigin src="/assets/index-CrY-RU1P.js"></script>
41+
<link rel="stylesheet" crossorigin href="/assets/index-DBAmFvu5.css">
4242
</head>
4343
<body>
4444
<!-- Portrait mode warning for mobile -->

‎src/client/components/SuitIcon.jsx‎

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ import React from 'react';
44
// Wheat & Sunflower = cream/gold suits
55
// Potato & Beet = red suits
66

7+
// Explicit colors for iOS Safari compatibility (currentColor inheritance is unreliable)
8+
const CREAM = '#e8dcc4';
9+
const RED = '#c41e3a';
10+
711
// ============================================
812
// Navigation Icons - Soviet themed, monochrome
913
// ============================================
@@ -96,50 +100,50 @@ export function NavIcon({ type, className = '' }) {
96100
}
97101

98102
const WheatIcon = () => (
99-
<svg viewBox="0 0 24 24" width="24" height="24" className="suit-svg">
100-
<path d="M12 2 L12 22" stroke="currentColor" strokeWidth="1.5" fill="none"/>
101-
<ellipse cx="9" cy="5" rx="2.5" ry="1.2" transform="rotate(-30 9 5)" fill="currentColor"/>
102-
<ellipse cx="8.5" cy="8" rx="2.5" ry="1.2" transform="rotate(-25 8.5 8)" fill="currentColor"/>
103-
<ellipse cx="9" cy="11" rx="2.5" ry="1.2" transform="rotate(-20 9 11)" fill="currentColor"/>
104-
<ellipse cx="15" cy="5" rx="2.5" ry="1.2" transform="rotate(30 15 5)" fill="currentColor"/>
105-
<ellipse cx="15.5" cy="8" rx="2.5" ry="1.2" transform="rotate(25 15.5 8)" fill="currentColor"/>
106-
<ellipse cx="15" cy="11" rx="2.5" ry="1.2" transform="rotate(20 15 11)" fill="currentColor"/>
107-
<ellipse cx="12" cy="3" rx="1.8" ry="2.5" fill="currentColor"/>
103+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" className="suit-svg">
104+
<path d="M12 2 L12 22" stroke={CREAM} strokeWidth="1.5" fill="none"/>
105+
<ellipse cx="9" cy="5" rx="2.5" ry="1.2" transform="rotate(-30 9 5)" fill={CREAM}/>
106+
<ellipse cx="8.5" cy="8" rx="2.5" ry="1.2" transform="rotate(-25 8.5 8)" fill={CREAM}/>
107+
<ellipse cx="9" cy="11" rx="2.5" ry="1.2" transform="rotate(-20 9 11)" fill={CREAM}/>
108+
<ellipse cx="15" cy="5" rx="2.5" ry="1.2" transform="rotate(30 15 5)" fill={CREAM}/>
109+
<ellipse cx="15.5" cy="8" rx="2.5" ry="1.2" transform="rotate(25 15.5 8)" fill={CREAM}/>
110+
<ellipse cx="15" cy="11" rx="2.5" ry="1.2" transform="rotate(20 15 11)" fill={CREAM}/>
111+
<ellipse cx="12" cy="3" rx="1.8" ry="2.5" fill={CREAM}/>
108112
</svg>
109113
);
110114

111115
const SunflowerIcon = () => (
112-
<svg viewBox="0 0 24 24" width="24" height="24" className="suit-svg">
113-
<circle cx="12" cy="10" r="4" fill="currentColor"/>
114-
<ellipse cx="12" cy="3" rx="2" ry="3" fill="currentColor"/>
115-
<ellipse cx="17" cy="5" rx="2" ry="3" transform="rotate(45 17 5)" fill="currentColor"/>
116-
<ellipse cx="19" cy="10" rx="3" ry="2" fill="currentColor"/>
117-
<ellipse cx="17" cy="15" rx="2" ry="3" transform="rotate(-45 17 15)" fill="currentColor"/>
118-
<ellipse cx="12" cy="17" rx="2" ry="3" fill="currentColor"/>
119-
<ellipse cx="7" cy="15" rx="2" ry="3" transform="rotate(45 7 15)" fill="currentColor"/>
120-
<ellipse cx="5" cy="10" rx="3" ry="2" fill="currentColor"/>
121-
<ellipse cx="7" cy="5" rx="2" ry="3" transform="rotate(-45 7 5)" fill="currentColor"/>
122-
<path d="M12 14 L12 23" stroke="currentColor" strokeWidth="2" fill="none"/>
116+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" className="suit-svg">
117+
<circle cx="12" cy="10" r="4" fill={CREAM}/>
118+
<ellipse cx="12" cy="3" rx="2" ry="3" fill={CREAM}/>
119+
<ellipse cx="17" cy="5" rx="2" ry="3" transform="rotate(45 17 5)" fill={CREAM}/>
120+
<ellipse cx="19" cy="10" rx="3" ry="2" fill={CREAM}/>
121+
<ellipse cx="17" cy="15" rx="2" ry="3" transform="rotate(-45 17 15)" fill={CREAM}/>
122+
<ellipse cx="12" cy="17" rx="2" ry="3" fill={CREAM}/>
123+
<ellipse cx="7" cy="15" rx="2" ry="3" transform="rotate(45 7 15)" fill={CREAM}/>
124+
<ellipse cx="5" cy="10" rx="3" ry="2" fill={CREAM}/>
125+
<ellipse cx="7" cy="5" rx="2" ry="3" transform="rotate(-45 7 5)" fill={CREAM}/>
126+
<path d="M12 14 L12 23" stroke={CREAM} strokeWidth="2" fill="none"/>
123127
</svg>
124128
);
125129

126130
const PotatoIcon = () => (
127-
<svg viewBox="0 0 24 24" width="24" height="24" className="suit-svg">
128-
<path d="M12 3 C6 3 3 8 3 12 C3 17 6 21 12 21 C18 21 21 17 21 12 C21 8 18 3 12 3 Z" fill="currentColor"/>
129-
<circle cx="8" cy="9" r="1" fill="none" stroke="currentColor" strokeWidth="0.8" opacity="0.6"/>
130-
<circle cx="15" cy="11" r="0.8" fill="none" stroke="currentColor" strokeWidth="0.8" opacity="0.6"/>
131-
<circle cx="10" cy="15" r="0.9" fill="none" stroke="currentColor" strokeWidth="0.8" opacity="0.6"/>
131+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" className="suit-svg">
132+
<path d="M12 3 C6 3 3 8 3 12 C3 17 6 21 12 21 C18 21 21 17 21 12 C21 8 18 3 12 3 Z" fill={RED}/>
133+
<circle cx="8" cy="9" r="1" fill="none" stroke={RED} strokeWidth="0.8" opacity="0.6"/>
134+
<circle cx="15" cy="11" r="0.8" fill="none" stroke={RED} strokeWidth="0.8" opacity="0.6"/>
135+
<circle cx="10" cy="15" r="0.9" fill="none" stroke={RED} strokeWidth="0.8" opacity="0.6"/>
132136
</svg>
133137
);
134138

135139
const BeetIcon = () => (
136-
<svg viewBox="0 0 24 24" width="24" height="24" className="suit-svg">
137-
<path d="M12 8 C7 8 5 12 6 16 C7 19 10 22 12 22 C14 22 17 19 18 16 C19 12 17 8 12 8 Z" fill="currentColor"/>
138-
<path d="M10 8 C9 5 7 3 6 2 C8 3 10 4 11 7" fill="currentColor"/>
139-
<path d="M12 7 C12 4 12 2 12 1 C12 2 12 4 12 7" fill="currentColor"/>
140-
<path d="M14 8 C15 5 17 3 18 2 C16 3 14 4 13 7" fill="currentColor"/>
141-
<path d="M8 12 Q12 13 16 12" stroke="currentColor" strokeWidth="0.5" fill="none" opacity="0.4"/>
142-
<path d="M9 15 Q12 16 15 15" stroke="currentColor" strokeWidth="0.5" fill="none" opacity="0.4"/>
140+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" className="suit-svg">
141+
<path d="M12 8 C7 8 5 12 6 16 C7 19 10 22 12 22 C14 22 17 19 18 16 C19 12 17 8 12 8 Z" fill={RED}/>
142+
<path d="M10 8 C9 5 7 3 6 2 C8 3 10 4 11 7" fill={RED}/>
143+
<path d="M12 7 C12 4 12 2 12 1 C12 2 12 4 12 7" fill={RED}/>
144+
<path d="M14 8 C15 5 17 3 18 2 C16 3 14 4 13 7" fill={RED}/>
145+
<path d="M8 12 Q12 13 16 12" stroke={RED} strokeWidth="0.5" fill="none" opacity="0.4"/>
146+
<path d="M9 15 Q12 16 15 15" stroke={RED} strokeWidth="0.5" fill="none" opacity="0.4"/>
143147
</svg>
144148
);
145149

‎src/client/components/TrickAreaHTML.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -166,9 +166,9 @@
166166
display: inline-flex;
167167
align-items: center;
168168
justify-content: center;
169-
/* Explicit pixel dimensions for iOS WebKit compatibility */
170-
width: clamp(16px, 1.2em, 24px);
171-
height: clamp(16px, 1.2em, 24px);
169+
/* Use vw units like NavBar - em units break on iOS Safari */
170+
width: clamp(16px, 2vw, 24px);
171+
height: clamp(16px, 2vw, 24px);
172172
vertical-align: middle;
173173
}
174174

0 commit comments

Comments
 (0)