diff --git a/src/components/Board.svelte b/src/components/Board.svelte
index add023e..9d1a60d 100644
--- a/src/components/Board.svelte
+++ b/src/components/Board.svelte
@@ -118,13 +118,11 @@
danceClick(t)}
out:fade={{ duration: 500 }}
>
- {'DANCE'[t]}
+ {'DANCE'.substring(0, danceClickProgress)[t] || ''}
{/if}
{#if idle && tile.letter === '' && r > $currentRow}
diff --git a/src/components/Idler.svelte b/src/components/Idler.svelte
index dad8fcf..40d1b78 100644
--- a/src/components/Idler.svelte
+++ b/src/components/Idler.svelte
@@ -26,8 +26,7 @@
const performAnimation = async (
animation: MultipartAnimation,
endDelay = 0,
- iterations = 1,
- fill: FillMode = 'forwards'
+ iterations = 1
): Promise => {
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)
}
})
)
diff --git a/src/lib/transitions.ts b/src/lib/transitions.ts
index b8c7765..91098b1 100644
--- a/src/lib/transitions.ts
+++ b/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