CSS transition not working in Safari

Question

I have a Shopify theme with a search form that uses an animation on its width attribute, to be triggered by a jQuery call:

  <span id="store-search">
    <div><a class="iconfont big-search" tabindex="0">&#0035;</a></div>
    <form action="http://penumbra-foundation.myshopify.com/search" method="get" class="search-bar">
      <input id="query" tabindex="0" name="q" type="text" value="Search" onfocus="if(this.value == value) { this.value = ''; }">
      <input type="submit" value="Search" style="display:none" />
    </form>
  </span>

Here's the associated js:

<script>
  $('a.big-search').click(function(){
    setTimeout(function(){$('#store-search form:first *:input:first').focus();},0);
  });
</script>

This uses the fix from focus() not working in safari or chrome but with no success.

And the CSS for the animation is here:

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;

Link is here:

http://penumbra-foundation.myshopify.com/

It's the big outlined magnifying glass search bar against a maroon background. Thanks for any help.

Answer 1

Not sure if this is an acceptable solution for you (it is certainly not a great/perfect solution), but it looks like it works if you change the starting width of your input element there from 0em to 0.07em (or 0.07rem for consistency with your other units of measure).

I can't find any documentation about it, but it looks like Safari is having trouble starting the transition from 0 (or even small numbers that it considers to close enough to 0).