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.

Also the selector Looks good, have you tried `$("#query").focus();`? why did you not just use `placeholder="Search"`? — Nico O, Feb 17 '14 at 23:02
Changed to placeholder="Search" and removed the timer, still no response or console errors in Safari — Duncan Malashock, Feb 17 '14 at 23:10
It looks like the problem is that the width animation isn't happening, not that the focus isn't working. — Patrick Q, Feb 17 '14 at 23:13
But why are you using the timeout in the First Place. Try to wrap your Code like this: $(function(){ //your js }); — Nico O, Feb 17 '14 at 23:14
@DuncanMalashock You should provide the animation code then. — Patrick Q, Feb 17 '14 at 23:14
@NicoO refer to the fix I linked to in the original post for the reason I'm using setTimeout. — Duncan Malashock, Feb 18 '14 at 01:38

score 0 · Accepted Answer · answered Feb 18 '14 at 21:14

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).

CSS transition not working in Safari

1 Answers1