diff --git a/src/components/dice/DiceInteraction.tsx b/src/components/dice/DiceInteraction.tsx index 525c215..8ba0a58 100644 --- a/src/components/dice/DiceInteraction.tsx +++ b/src/components/dice/DiceInteraction.tsx @@ -20,6 +20,7 @@ import usePreventTouch from "../../hooks/usePreventTouch"; import ErrorBanner from "../banner/ErrorBanner"; import { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh"; +import { isSafari } from "../../helpers/shared"; const diceThrowSpeed = 2; @@ -57,15 +58,14 @@ function DiceInteraction({ } try { - const engine = new Engine(canvas, true, { + // iOS 15.4 introduced a bug - animation trails ar visible on dice in Safari. Have to disable antialiasing on Safari + // https://forum.babylonjs.com/t/render-loop-issue-on-iphone-11-unwanted-animation-trails/29742 + const engine = new Engine(canvas, !isSafari, { preserveDrawingBuffer: true, stencil: true, // Prevent XR from loading as Safari 15 crashes with this enabled // TODO: Remove when https://github.com/BabylonJS/Babylon.js/pull/11121/files released - xrCompatible: false, - // iOS 15.4.1 introduced a bug - animation trails on dice - // https://forum.babylonjs.com/t/render-loop-issue-on-iphone-11-unwanted-animation-trails/29742 - antialias: false + xrCompatible: false }); const scene = new Scene(engine); scene.clearColor = new Color4(0, 0, 0, 0); diff --git a/src/helpers/shared.ts b/src/helpers/shared.ts index 5908eb2..b938893 100644 --- a/src/helpers/shared.ts +++ b/src/helpers/shared.ts @@ -86,6 +86,8 @@ export function groupBy(array: Record[], key: string) { export const isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform); +export const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); + export function shuffle(array: Type[]) { let temp = [...array]; var currentIndex = temp.length,