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