CSS過渡在Safari

不工作我有一個Shopify主題與它的寬度屬性使用的動畫，由一個jQuery呼叫觸發一個搜索表單：CSS過渡在Safari

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

這裏的相關JS：

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

這使用從focus() not working in safari or chrome修復，但沒有成功。

而且動畫的CSS是在這裏：

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;

鏈接是在這裏：

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

這是對一個栗色的背景大概述放大鏡搜索欄。謝謝你的幫助。

來源

2014-02-17 Duncan Malashock

此外選擇器看起來不錯，你嘗試過'$（「＃query」）。focus（）;'？爲什麼你不只是使用'placeholder =「搜索」'？ –

更改爲佔位符=「搜索」並刪除了定時器，Safari中仍然沒有響應或控制檯錯誤 –

看起來問題在於寬度動畫沒有發生，並不是焦點無法正常工作。 –