chuyển tiếp css không nhất quán khi được kích hoạt khi di chuyển cảm ứng

Question

Tôi đang kích hoạt thay đổi vị trí css (với hoạt ảnh chuyển tiếp css) khi người dùng cuộn xuống dưới một điểm nhất định. Điều này hoạt động tốt trên chrome/safari trên máy tính nhưng không phù hợp trên iphone. Đôi khi nó nhảy thay vì hoạt hình, đôi khi nó không làm gì cả và hoạt bát.

Tôi đã thử sử dụng jQuery animate, thêm translate3d và đặt phần tử trên lớp của riêng nó, tất cả đều tạo ra cùng một kết quả.

Dưới đây là các mã:

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

Tôi ngạc nhiên -webkit-transition công trình trên một chiếc iPhone nào cả.

Thông thường bạn sẽ thấy một cái gì đó như:

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

tiền tố người bán hàng là tuyệt vời phải không? (không)