title: Materialize tabs z-index indicator not working on safari
body: <p>I'm using materialize.css for my front end, and i styled the tab indicator. It seems like there's a problem with the tab's link. It's working fine on other browser, but there's something wrong on Safari. Here's the screenshot.</p>
  
  <p><a href="https://i.stack.imgur.com/Nhbn0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Nhbn0.png" alt=""></a></p>
  
  <p>Top: Safari, Bottom: other browser</p>
  
  <p>And here's my stylesheet.</p>
  
  <pre class="lang-css prettyprint-override"><code>#siteplan-content .section #siteplan-tabs {
      padding-top: 55px;
  }
  
  #siteplan-content .section #siteplan-tabs ul li {
      display: block;
      z-index: 99;
      color: #fff;
      /* Support for all WebKit browsers. */
      -webkit-font-smoothing: antialiased;
      /* Support for Safari and Chrome. */
      text-rendering: optimizeLegibility;
  }
  
  #siteplan-content .section #siteplan-tabs ul.tabs {
      background-color: #000;
      font-family: 'Fontin', regular;
      font-size: 1.2vw;
      left: -11.4px;
      z-index: 62;
  }
  
  #siteplan-content .section #siteplan-tabs ul li a,
  #siteplan-content .section #siteplan-tabs ul li a.active {
      color: #fff !important;
      letter-spacing: 0.2rem;
      z-index: 62 !important;
  }
  
  #siteplan-content .section #siteplan-tabs ul li a.active {
      color: #fff !important;
      letter-spacing: 0.2rem;
      /*z-index: 10002 !important;*/
      opacity: 1 !important;
  }
  
  #siteplan-content .section #siteplan-tabs ul.tabs .indicator {
      background-color: #7e735b;
      height: 48px;
      bottom: 0;
      z-index: 61;
  }
  </code></pre>
  
  <p>Here's the markup:</p>
  
  <pre><code>&lt;div class="col s12 m12 center" id="siteplan-tabs" style="color: #fff !important;"&gt;
      &lt;ul class="tabs hide-on-small-only"&gt;
          &lt;li class="tab col s2"&gt;&lt;a class="active" href="#test1" onclick="siteplan()"&gt;&lt;?php echo getSiteplanTitle('2') ?&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="tab col s2"&gt;&lt;a href="#regent-content" onclick="regent()"&gt;&lt;?php echo getSiteplanTitle('3') ?&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="tab col s2"&gt;&lt;a href="#signature-content" onclick="signature()"&gt;&lt;?php echo getSiteplanTitle('4') ?&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="tab col s2"&gt;&lt;a href="#titan-content" onclick="titan()"&gt;&lt;?php echo getSiteplanTitle('5') ?&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;!-- &lt;li class="tab col s2"&gt;&lt;a href="#ultimate-content" onclick="ultimate()"&gt;Ultimate&lt;/a&gt;&lt;/li&gt; --&gt;
          &lt;li class="tab col s2"&gt;&lt;a href="#venture-content" onclick="venture()"&gt;&lt;?php echo getSiteplanTitle('7') ?&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>FYI: I'm using Safari 5.1.7 for Windows.</p>