title: CSS transition not working in Safari
body: <p>I have a Shopify theme with a search form that uses an animation on its width attribute, to be triggered by a jQuery call:</p>
  
  <pre><code>  &lt;span id="store-search"&gt;
      &lt;div&gt;&lt;a class="iconfont big-search" tabindex="0"&gt;&amp;#0035;&lt;/a&gt;&lt;/div&gt;
      &lt;form action="http://penumbra-foundation.myshopify.com/search" method="get" class="search-bar"&gt;
        &lt;input id="query" tabindex="0" name="q" type="text" value="Search" onfocus="if(this.value == value) { this.value = ''; }"&gt;
        &lt;input type="submit" value="Search" style="display:none" /&gt;
      &lt;/form&gt;
    &lt;/span&gt;
  </code></pre>
  
  <p>Here's the associated js:</p>
  
  <pre><code>&lt;script&gt;
    $('a.big-search').click(function(){
      setTimeout(function(){$('#store-search form:first *:input:first').focus();},0);
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>This uses the fix from <a href="https://stackoverflow.com/questions/2074347/focus-not-working-in-safari-or-chrome">focus() not working in safari or chrome</a> but with no success.</p>
  
  <p>And the CSS for the animation is here:</p>
  
  <pre><code>width: 0;
  -webkit-transition: width 1000ms linear;
  -webkit-transition-delay: 0;
  -moz-transition: width 1000ms linear 0;
  -o-transition: width 1000ms linear 0;
  transition: width 1000ms linear 0;
  </code></pre>
  
  <p>Link is here:</p>
  
  <p><a href="http://penumbra-foundation.myshopify.com/" rel="nofollow noreferrer">http://penumbra-foundation.myshopify.com/</a></p>
  
  <p>It's the big outlined magnifying glass search bar against a maroon background. Thanks for any help.</p>