开发者

Multiple Annimations created by CSS transitions on iOS only

开发者 https://www.devze.com 2023-04-07 04:21 出处:网络
Very perplexing problem has arisen. The following webpage has a search input at the top that when focus a changes class attributes with a series of transition effects.

Very perplexing problem has arisen. The following webpage has a search input at the top that when focus a changes class attributes with a series of transition effects.

Some JQuery the binds the focus event and displays a tooltip.

On iOS the transition happens 3 times before it finally settles in focus and the tooltip never appears.

Here is the link in question

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

Any ideas why?

Marvellous

As REQUESTED

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开发者_C百科 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;
}
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号