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 =" Search "? –

Изменено на placeholder = «Поиск» и удалено таймер, по-прежнему нет ответа или ошибок в консоли Safari –

Похоже, проблема заключается в том, что анимация ширины не происходит, а не то, что фокус не работает. –

Не уверен, если это является приемлемым решением для вас (это, конечно, не большой/идеальное решение), но похоже, что это работает, если вы измените стартовую ширину вашего входного элемента есть от 0em до 0.07em (или 0.07rem для согласованности с другими единицами измерения).

Я не могу найти документацию об этом, но похоже, что Safari испытывает проблемы с переходом от 0 (или даже к небольшим числам, которые он считает достаточно близкими к 0).

источник

2014-02-18 21:14:32

CSS переход не работает в Safari

ответ

Смежные вопросы