title: React button not clickable in Firefox and Safari
body: <p>I built a react app which is working fine in chrome, but for some reason there's a button that isn't clickable in Safari and Mozilla.</p>
  <p>It's a very basic headr with a boostrap button on it. Does anyone have an idea of what's happening?</p>
  <pre><code>const Header = (props) =&gt; {
  
    const testFunc = () =&gt; {
      console.log(&quot;button clicked&quot;);
    }
  
    let connectionButton;
    if (window.accountId == null || typeof window.accountId === 'undefined' || accountId == '') {
      connectionButton = &lt;button className=&quot;bold-font btn-transparent header_connect_btn&quot; onClick={()=&gt;testFunc()}&gt;Connect Wallet&lt;/button&gt;;
    } else {
      connectionButton = &lt;button className=&quot;bold-font btn-transparent header_connect_btn&quot; onClick={()=&gt;props.setshowDeposit(true)}&gt;Ⓝ {props.balanceProps}&lt;/button&gt;;
    }
  
    return (
      &lt;div className='header'&gt;
        &lt;div className='header_background'&gt;&lt;/div&gt;
        &lt;Stack direction='horizontal' className=&quot;header_navbar header-mobile&quot; gap={3}&gt;
          &lt;Image src={KangarooLogo}  className = &quot;logo-header&quot;/&gt;&lt;div&gt;&lt;/div&gt;
          &lt;Stack direction=&quot;horizontal&quot; className=&quot;pull-right&quot; gap={2}&gt;
            &lt;a href=&quot;/#&quot;&gt;About&lt;/a&gt;
            &lt;a href=&quot;/#&quot;&gt;How To Play&lt;/a&gt;
            &lt;a href=&quot;/#&quot;&gt;FAQ&lt;/a&gt;
  
          &lt;/Stack&gt;
          {connectionButton}
        &lt;/Stack&gt;      
      &lt;/div&gt;
    );
  };
  
  export default Header;
  </code></pre>