CSS转换无法在Safari中使用

Question

我有一个带有搜索表单的Shopify主题，该表单在其width属性上使用动画，并由jQuery调用触发：

  <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（）的修复程序无法在Safari或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/

这是褐红色背景下的大轮廓放大镜搜索栏。 谢谢你的帮助。

Answer 1

不知道这是你的一个可接受的解决方案（这肯定不是一个伟大的/完美的解决方案），但它看起来就像如果你从那里更改输入元素的起始宽度它工作0em到0.07em （或0.07rem的一致性与您的其他计量单位）。

我找不到有关它的任何文档，但似乎Safari在从0（甚至认为可以足够接近0的较小数字）开始过渡时遇到了麻烦。