Detect Apple processors

src/environment/appleMx.ts

@@ -0,0 +1,16 @@
+let IS_APPLE_MX = false;
+
+try {
+  // Awesome detect from https://stackoverflow.com/a/65412357
+  const ctx = document.createElement('canvas').getContext('webgl');
+  const extension = ctx.getExtension('WEBGL_debug_renderer_info');
+  const renderer: string = extension && ctx.getParameter(extension.UNMASKED_RENDERER_WEBGL) || '';
+  if((renderer.match(/Apple/) && !renderer.match(/Apple GPU/)) || 
+    ctx.getSupportedExtensions().indexOf("WEBGL_compressed_texture_s3tc_srgb") === -1) {
+    IS_APPLE_MX = true;
+  }
+} catch(err) {
+
+}
+
+export default IS_APPLE_MX;

src/environment/index.ts

@@ -18,9 +18,11 @@ import IS_WEBRTC_SUPPORTED from "./webrtcSupport";
 import * as userAgent from "./userAgent";
 import IS_OPUS_SUPPORTED from "./opusSupport";
 import IS_SHARED_WORKER_SUPPORTED from "./sharedWorkerSupport";
+import IS_APPLE_MX from "./appleMx";
 
 const ENVIRONMENT = {
   CAN_USE_TRANSFERABLES,
+  IS_APPLE_MX,
   IS_CALL_SUPPORTED,
   IS_CANVAS_FILTER_SUPPORTED,
   IS_EMOJI_SUPPORTED,

src/lib/rlottie/rlottiePlayer.ts

@@ -5,6 +5,7 @@
  */
 
 import CAN_USE_TRANSFERABLES from "../../environment/canUseTransferables";
+import IS_APPLE_MX from "../../environment/appleMx";
 import { IS_ANDROID, IS_APPLE_MOBILE, IS_APPLE, IS_SAFARI } from "../../environment/userAgent";
 import EventListenerBase from "../../helpers/eventListenerBase";
 import mediaSizes from "../../helpers/mediaSizes";
@@ -175,7 +176,7 @@ export default class RLottiePlayer extends EventListenerBase<{
     // * Skip ratio (30fps)
     let skipRatio: number;
     if(options.skipRatio !== undefined) skipRatio = options.skipRatio;
-    else if((IS_ANDROID || IS_APPLE_MOBILE || (IS_APPLE && !IS_SAFARI)) && this.width < 100 && this.height < 100 && !options.needUpscale) {
+    else if((IS_ANDROID || IS_APPLE_MOBILE || (IS_APPLE && !IS_SAFARI && !IS_APPLE_MX)) && this.width < 100 && this.height < 100 && !options.needUpscale) {
       skipRatio = 0.5;
     }