title: Why does this SVG shape work differently on Chrome than Safari?
body: <p>On the fiddle with safari you'll notice it doesn't have the bottom border. If you go visit the fiddle with Chrome, you'll see the bottom border. The hover effect will work on both browsers, but I'm trying to diagnose why the border bottom doesn't work on Safari.</p>
  
  <p>Thanks!</p>
  
  <p><a href="http://jsfiddle.net/XJeqd/" rel="nofollow">http://jsfiddle.net/XJeqd/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code> &lt;body&gt;
      &lt;div class="name"&gt;
          &lt;div class="svg-wrapper"&gt;
            &lt;svg height="60" width="320" xmlns="http://www.w3.org/2000/svg"&gt;
              &lt;rect class="shape" height="60" width="320" /&gt;
              &lt;div class="text"&gt;STEVE&lt;/div&gt;
            &lt;/svg&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>body {
    background: #303030;
    min-height: 100%;
    text-align: center;
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }
  
  .name {
      position: relative;
      top: 60px;
      cursor: default;
  }
  
  .svg-wrapper {
    position: relative;
    transform: translateY(-50%);
    margin: 0 auto;
    width: 320px;  
  }
  
  .shape {
    stroke-dasharray: 140 540;
    stroke-dashoffset: -474;
    stroke-width: 8px;
    fill: transparent;
    stroke: #9a5cb4;
    border-bottom: 5px solid black;
    transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
  }
  
  .text {
    font-family: 'Roboto Condensed';
    font-size: 22px;
    line-height: 32px;
    letter-spacing: 8px;
    color: #fff;
    top: -48px;
    left: 0px;
    position: relative;
  }
  
  .svg-wrapper:hover .shape {
    stroke-width: 2px;
    stroke-dashoffset: 0;
    stroke-dasharray: 760;
  }
  </code></pre>