diff --git a/packages/web/src/javascripts/Components/Panes/PaneAnimator.tsx b/packages/web/src/javascripts/Components/Panes/PaneAnimator.tsx index a4f415a8f..e64c58fd3 100644 --- a/packages/web/src/javascripts/Components/Panes/PaneAnimator.tsx +++ b/packages/web/src/javascripts/Components/Panes/PaneAnimator.tsx @@ -28,6 +28,8 @@ export async function animatePaneEntranceTransitionFromOffscreenToTheRight(eleme await animation.finished + performSafariAnimationFix(element) + animation.finish() } @@ -58,3 +60,21 @@ export async function animatePaneExitTransitionOffscreenToTheRight(elementId: st animation.finish() } + +/** + * Safari has a bug where animations don't properly commit sometimes and a tap on the screen or click anywhere fixes it. + * The workaround here is just to get Safari to recompute the element layout. This issue manifests itself when selecting + * a Daily Notebook tag from navigation whereby two pane animations are simulatensouly triggered (the items panel, then + * the editor panel), causing Safari to get tripped up. + */ +function performSafariAnimationFix(element: HTMLElement): void { + const isSafari = /Safari/.test(navigator.userAgent) || /AppleWebKit/.test(navigator.userAgent) + if (!isSafari) { + return + } + + element.style.opacity = '0.999' + setTimeout(() => { + element.style.opacity = '1.0' + }, 0) +}