Przejście css niespójne, gdy zostanie wywołane przy ruchu dotykowym

Question

Wywołuję zmianę pozycji css (z animacją przejścia css), gdy użytkownik przewinie poniżej określonego punktu. To działa dobrze na chrome/safari na PC, ale jest niespójne na iPhone. Czasami przeskakuje zamiast animować, czasem nic nie robi i ożywczo animuje.

Próbowałem używać animacji jQuery, dodałem translate3d i umieściłem element na osobnej warstwie, z których wszystkie dały takie same wyniki.

Oto kod:

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

Dziwię -webkit-transition prace na iPhone w ogóle.

Zwykle zobaczysz coś takiego:

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

dostawcy prefiksy są niesamowite prawda? (nie)