Detect isSafari to disable antialias on dice

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);

src/helpers/shared.ts

@@ -86,6 +86,8 @@ export function groupBy(array: Record<PropertyKey, any>[], 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<Type>(array: Type[]) {
   let temp = [...array];
   var currentIndex = temp.length,