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() 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/

这是针对褐红色背景的大概述放大镜搜索栏。谢谢你的帮助。

Answer 1

不确定这是否是一个可接受的解决方案（它肯定不是一个很好/完美的解决方案），但如果你将输入元素的起始宽度从0em更改为{ {1}}（或0.07em与您的其他计量单位保持一致）。

我找不到任何关于它的文档，但看起来Safari很难从0开始转换（甚至是它认为足够接近0的小数字）。

CSS转换不适用于Safari

1 个答案: