JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gpu rendering canvas check</title>
</head>
<body>
<div id="msg"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/canvas-size.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/es5.min.js"></script>
<script>
  const browser = bowser.getParser(window.navigator.userAgent);
  const couldHaveBug = browser.satisfies({
    // per platform (mobile, desktop or tablet)
    mobile: {
      safari: '>=15.0',
    },
  });

  new Promise((resolve, reject) => {
    if(couldHaveBug) {
      canvasSize.maxHeight({
        onSuccess : resolve
      });
      reject();
    }
    resolve();
  }).then(()=>{
    document.getElementById('msg').innerText = `No problems found`;
  }).catch(()=>{
    document.getElementById('msg').innerText = `DETECTED BUG IN SAFARI EXPERIMENTAL FEATURE. Please disable GPU Process: Canvas Rendering`;
  });
</script>
</body>
</html>