Несколько анимаций, созданных с помощью CSS-переходов только на iOS - PullRequest
Новая
       5

Несколько анимаций, созданных с помощью CSS-переходов только на iOS

0 голосов
/ 23 сентября 2011

Возникла очень запутанная проблема. На следующей веб-странице вверху есть поисковый ввод, который при фокусировке изменяет атрибуты класса с помощью серии эффектов перехода.

Некоторые JQuery связывают событие фокуса и отображают всплывающую подсказку.

В iOS переход происходит 3 раза, прежде чем он окончательно фокусируется, и всплывающая подсказка не появляется.

Вот ссылка на вопрос

http://www.golfbrowser.com/WebObjects/header.html

Есть идеи, почему?

Marvelous

по запросу

Jquery 

$('#header .search input').blur(function(){
     $('#header .results').removeClass('visible');
 });

    $('#search').focus(function(){
        if($(this).val() == '' || $(this).val() == $(this).attr('placeholder')){
     $('.suggestion').addClass('visible');
    }});
    $('#search').blur(function(){
      $('#header .suggestion').removeClass('visible');
    });

CSS 

#header .search input {
    height:32px;
    width:60px;
    background:url(header/magglass.png) 2px 5px no-repeat;
    padding-left:28px;
    margin-right:5px;
    font-family:"Helvetica Neue", "Myriad Pro", Arial;
    font-weight:bold;
    font-size:13px;
    color:#FFF;
    float:left;
    background-color:#454545;
    border:0px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:0px;
    border-top-left-radius:0px;
    border-top-right-radius:0px;
    -moz-border-radius-bottomleft:10px;
    -moz-border-radius-bottomright:0px;
    -moz-border-radius-topright:0px;
    -moz-border-radiustopleft:0px;
    opacity:0.75;filter:alpha(opacity=75);
    text-decoration:none;
    display:block;
    -webkit-transition-property:all;
    -webkit-transition-duration:500ms;
    -moz-transition-property:all;
    -moz-transition-duration:500ms;
    -webkit-transition-delay:1000ms;
    -moz-transition-delay:1000ms;
    outline:none;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
#header .search input:focus {
    width:220px;
    background-color:#FFF;
    border-color:#FFF;
    color:#222;
    opacity:1.0;filter:alpha(opacity=100);
    -webkit-transition-delay:0ms;
    -moz-transition-delay:0ms;
}
...