title: Bad rendering result of Safari when components including blur & gradient styles
body: <p>I'm trying to do someting like this:</p>
  <p><a href="https://i.stack.imgur.com/gr5wX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gr5wX.png" alt="enter image description here" /></a></p>
  <p>It's a glowing spot follows the pointer</p>
  <pre class="lang-js prettyprint-override"><code>import { useEffect, useState } from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  
  const CUBE_SIZE = 100;
  
  export default function App() {
    const [left, setLeft] = useState(window.innerWidth / 2);
    const [top, setTop] = useState(window.innerHeight / 2);
  
    const mouseMoveHandler = (event) =&gt; {
      setLeft(`${event.clientX - CUBE_SIZE / 2}px`);
      setTop(`${event.clientY - CUBE_SIZE / 2}px`);
    };
  
    useEffect(() =&gt; {
      document.addEventListener(&quot;mousemove&quot;, mouseMoveHandler);
      return () =&gt; {
        document.removeEventListener(&quot;mousemove&quot;, mouseMoveHandler);
      };
    }, []);
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;div
          style={{ width: `${CUBE_SIZE}px`, height: `${CUBE_SIZE}px`, left, top }}
          className=&quot;glowing-cube&quot;
        /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>body {
    background-color: black;
  }
  
  .App {
    font-family: sans-serif;
    text-align: center;
  }
  
  .glowing-cube {
    position: relative;
    background: linear-gradient(216.89deg, #dc4b5c 6.73%, #5a53ff 81.32%);
    filter: blur(32px);
    border-radius: 31px;
    transform: rotate(135deg);
  }
  </code></pre>
  <p>The codesandbox link is below:</p>
  <p><a href="https://7h7cpj.csb.app/" rel="nofollow noreferrer">https://7h7cpj.csb.app/</a></p>
  <p>Everything looks perfect in Chrome, while it looks bad on Safari:
  <a href="https://i.stack.imgur.com/L92BI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L92BI.jpg" alt="enter image description here" /></a></p>
  <p>I found <code>blur</code> is supported since Safari 6 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur" rel="nofollow noreferrer">ref</a> <br />
  Then what's the problem? <br />
  And, how can I do to improve this? <br />
  Is there a feasible solution on Safari? <br /></p>