html - Css3 Transition dont work on ios -
on pc , android devices transition code work on ios devices not work. im use html , css.
/***** box 3 *****/ #box3 { height:240px; width:198px; border:1px solid #dedede; background-color:#fcfcfc; position:relative; overflow:hidden; float:left; margin-right:23px; margin-bottom:23px; opacity:1; -webkit-transition: opacity .2s ease-out; -moz-transition: opacity .2s ease-out; -o-transition: opacity .2s ease-out; -ms-transition: opacity .2s ease-out; transition: opacity .2s ease-out; } #box3:hover { -webkit-box-shadow: 0 0 3px #999; -moz-box-shadow: 0 0 3px #999; box-shadow: 0 0 3px #999; } #box3 .bgbox3 { background:url(images/top-seller-3.jpg) 50% 10% no-repeat; position:absolute; height:240px; width:198px; opacity:1; -webkit-transition: .2s ease-out-in; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; -ms-transition: .2s ease-in-out; transition: .2s ease-in-out; } #box3:hover .bgbox3 { opacity:0.3; } #box3 a, #box3 a:hover { text-decoration: none; } .imagebox3 { background: url(images/bestellen.jpg); background-repeat:no-repeat; position:absolute; height:40px; width:40px; opacity:0; margin-top:80px; margin-left:10px; -webkit-transition: .2s linear; -moz-transition: .2s linear; -o-transition: .2s linear; -ms-transition: .2s linear; transition: .2s linear; } #box3:hover .imagebox3 { opacity:1; -webkit-transform:translate(45px ,0); transform:translate(45px ,0); }
thanks lot regards timur
for quick fix, try using :active
selector along :focus
?
the reliable way go put these attributes in , rid of css part:
<div id="box3" ontouchstart="this.setattribute('style','-webkit-box-shadow:0 0 3px #999;')" ontouchend="this.setattribute('style','')">
ontouchstart
official ios/android/webkit version of onmousedown
. , fires instant touches screen, whereas mouse events have longpress-detection delay.
another thing, set this.style.boxshadow
directly instead, experience shadows not render when set programatically, setting attribute scratch forces re-draw.
hope helps!
Comments
Post a Comment