CSS , wordwrapping pre tag in Safari
<p>Need best practice for styling <code>&lt;pre&gt;</code> tag in Safari</p>

<p>Here's my code in Chrome :</p>

<p><a href="https://i.stack.imgur.com/xcv0p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xcv0p.png" alt="Chrome render"></a></p>

<p>Meanwhile here's what it looks like in Safari : </p>

<p><a href="https://i.stack.imgur.com/ZMNmf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZMNmf.png" alt="Safari Render"></a></p>

<p>any idea guys?</p>

<pre><code>pre{
    border:0;
    border-radius:0;
    border-top:$orange 2px solid;
    overflow-x: auto;
    overflow-wrap:normal;
    word-wrap: break-word;
}
</code></pre>