🐛 Fix dancing letters on iOS

src/components/Board.svelte

@@ -118,13 +118,11 @@
 											<!-- svelte-ignore a11y-click-events-have-key-events -->
 											<div
 												class="dance-tile"
-												style:opacity={((t < danceClickProgress ? 1 : 0) *
-													danceClickProgress) /
-													5}
+												style:opacity={danceClickProgress / 5 || 1}
 												on:click={() => danceClick(t)}
 												out:fade={{ duration: 500 }}
 											>
-												{'DANCE'[t]}
+												{'DANCE'.substring(0, danceClickProgress)[t] || ''}
 											</div>
 										{/if}
 										{#if idle && tile.letter === '' && r > $currentRow}

src/components/Idler.svelte

@@ -26,8 +26,7 @@
 	const performAnimation = async (
 		animation: MultipartAnimation,
 		endDelay = 0,
-		iterations = 1,
-		fill: FillMode = 'forwards'
+		iterations = 1
 	): Promise<void> => {
 		await Promise.all(
 			AnimationParts.map(async (part) => {
@@ -36,9 +35,10 @@
 					await element.animate(animation[part]!, {
 						duration: animation.duration,
 						iterations,
-						endDelay,
-						fill,
+						fill: 'forwards',
 					}).finished
+					// Using the animation API's endDelay causes flickering on iOS, so we sleep instead
+					await sleep(endDelay)
 				}
 			})
 		)

src/lib/transitions.ts

@@ -43,8 +43,6 @@ export const bezierEasing = {
 
 // Based on https://codepen.io/danwilson/pen/xGBKVq
 export const animationSupported = (): boolean => {
-	// Unfortunately we can't risk having Chrome iOS's flickering animation bugs
-	if (navigator.userAgent.match('iPhone.*CriOS')) return false
 	const element = document.createElement('a')
 	document.body.appendChild(element)
 	if (!element.animate) return false