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

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -