Css geçişi, dokunulduğunda tetiklendiğinde tutarsız geçiş

Question

Kullanıcı belirli bir noktanın altına kaydırdığında css konum değişikliğini (css geçiş animasyonuyla) tetikliyorum. Bu pc üzerinde krom/safari üzerinde iyi çalışır, ancak iphone üzerinde tutarsızdır. Bazen animasyon yapmak yerine atlar, bazen hiçbir şey yapmaz ve bazen canlandırır.

jQuery animate'i kullanmayı denedim, translate3d ekledim ve öğeyi aynı katmanlar üreten kendi katmanına yerleştirdim.

var logoUp = false; 
    $(window)[0].addEventListener('touchmove', function(e) { 
     console.log($(window).scrollTop()); 
     if ($(window).scrollTop() > 33) { 
     if(!logoUp){ 
      $('.trig_logo').css({ 'top': '-90px' }) 
      logoUp = true; 
     } 


     } else { 
      if(logoUp){ 
      $('.trig_logo').css({ 'top': '0px' }) 
      logoUp = false; 
     } 
     } 
    }) 

CSS

.trig_logo { 
    background:url(/img/head_foot/logo.png) center 0px no-repeat; 
    height:400px; 
    position: absolute; 
    width:100%; 
    top:0px; 
    -webkit-transition: 0.25s top; 
} 

Answer 1

Sürpriz -webkit-transition bir iPhone üzerinde çalışmalarını hiç değilim:

İşte kod.

-webkit-transition: .25s top; 
-moz-transition: .25s top; 
-o-transition: .25s top; 
transition: .25s top; /* <-- actual standard */ 

Satıcı önekleri şaşırtıcı haklılar:

Tipik gibi bir şey göreceksiniz? (değil)