javascript - CSS transition not working in Safari -

I have a Shopify topic with a search form that uses its width feature on an animation, which by jQuery call Can be triggered:

  & lt; Span id = "store-search" & gt; & Lt; Div & gt; & Lt; One square = "iconfont big search" tabindex = "0" & ​​gt; And & # 0035; & Lt; / A & gt; & Lt; / Div & gt; & Lt; Form action = "http://penumbra-foundation.myshopify.com/search" method = "go" class = "search bar" & gt; & Lt; Input id = "query" tabindex = "0" name = "q" type = "article" value = "search" onfocus = "if (this.value == value) {this.value = '';}" & gt; ; & Lt; Input type = "submit" value = "search" style = "display: none" /> & Lt; / Form & gt; & Lt; / Span & gt;  

Here is the related JS:

  & lt; Script & gt; Click $ ('A.big-search') (function () {setTimeout (function () {$ ('# store-search form: first *: input: first'). Focus ();}, 0); }); & Lt; / Script & gt;  

It uses properly but not with success.

And CSS for the animation is here:

  width: 0; Webkit-transition: width 1000ms linear; Webkit-transition delay: 0; -Mozy-transition: width 1000ms linear 0; -O-Infection: width 1000ms linear 0; Transition: width 1000ms linear 0;  

The link is here:

This is a large red glass search bar against a red background. Thanks for any help.

Not sure that this is an acceptable solution for you (this is definitely not great / correct Solution), but it seems that if you change the initial width of your input element from 0em to 0.07em (or 0.07rem For stability with units).

I can not get any documents about this, but it seems that Safari is having trouble starting the transition from 0 (or even small numbers to close enough till 0 )