title: Loader isn't spinning when it's inside flex container
body: <p>I'm using <a href="https://semantic-ui.com/" rel="nofollow noreferrer">Semantic UI</a> library to build my React app. I'm using a <a href="https://semantic-ui.com/elements/loader.html" rel="nofollow noreferrer">Loader</a>, and somewhere in my component I have something like this:</p>
  
  <pre><code>if (loading) {
    return (
      &lt;div&gt;
        &lt;div className="ui active inline loader" /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>and everything works fine. However, Loader is not centered in the div, so I modified wrapper div to be like <code>&lt;div className="centered"</code>>, where:</p>
  
  <pre><code>.centered {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  </code></pre>
  
  <p>Now, Loader is centered but is not spinning <strong>in Safari browser</strong>! How can solve it?</p>
  
  <p>In Chrome it works fine.</p>