Multiple Annimations created by CSS transitions on iOS only
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;
}
精彩评论