Android 4 Sự cố kiểm tra lượt truy cập Chrome trên sự kiện chạm sau khi chuyển đổi CSS

Question

Tôi đang gặp sự cố với kết hợp các biến đổi CSS và thử nghiệm lần truy cập sự kiện chạm. Điều này chỉ sao chép cho tôi trong Chrome trên Android 4 (ổn định và beta). iOS Safari, cũng như máy tính để bàn Chrome với mô phỏng cảm ứng cả hai dường như hoạt động tốt.

Tôi gần như tích cực điều này phải là một lỗi, vì vậy tôi nghĩ rằng tôi chủ yếu là tìm cách giải quyết ở đây.

Vấn đề là thử nghiệm lần truy cập cho chạm chỉ có vẻ hoạt động đối với vị trí mà phần tử trước khi biến đổi, chứ không phải vị trí cuối cùng. Bạn có thể thấy một ví dụ về jsfiddle của tôi (chỉ trên Android 4 Chrome):

jsfiddle: http://jsfiddle.net/LfaQq/ toàn màn hình: http://jsfiddle.net/LfaQq/embedded/result/

Nếu bạn kéo hộp màu xanh nửa đường xuống màn hình và thả nó sẽ chụp lại đỉnh. Bây giờ, nếu bạn thử kéo từ nửa trên của trang một lần nữa, không có liên lạc nào sẽ đăng ký. Các sự kiện cảm ứng thậm chí không được bắn vào phần tử. Tuy nhiên, nếu bạn cố gắng chạm vào phần dưới của phần tử, nó hoạt động tốt. Sau đó, bạn có thể thử di chuyển nó lên từ dưới cùng và quan sát rằng thử nghiệm lần truy cập không còn hoạt động ở phía dưới nữa, nhưng hoạt động ở trên cùng.

Đây là cách tôi xử lý các sự kiện:

function handleTouch(e) { 

    console.log("handle touch") 

    e.preventDefault(); 

    switch(e.type){ 
     case 'touchstart': 
      console.log("touchstart"); 
      touchOriginY = e.targetTouches[0].screenY; 
      break; 
     case 'touchmove': 
      console.log("touchmove"); 
      el.innerHTML = e.targetTouches[0].screenY; 
      var p = e.targetTouches[0].screenY - touchOriginY; 
      el.style[TRANSFORM] = 'translate3d(0,' + p + 'px' + ',0)'; 
      break; 
     case 'touchcancel': 
      console.log("touchcancel"); 
      // Fall through to touchend 
     case 'touchend': 
      //console.log("touchend"); 
      //el.style[TRANSITION] = '.4s ease-out'; 
      el.style[TRANSFORM] = 'translate3d(0,0,0)'; 
      break; 
    } 

} 

el.addEventListener('touchstart', handleTouch); 
el.addEventListener('touchend', handleTouch); 
el.addEventListener('touchmove', handleTouch); 
el.addEventListener(TRANSITION_END, function(e) { 
    console.log("transition end") 
    el.style[TRANSITION] = ''; 
}); 

tôi không có bất kỳ vấn đề với các biến đổi trong touchmove, như những người không phải chạm mới được phát hiện anyways.

Mọi đề xuất?

Answer 1

Đây là lỗi không bình thường trong Chrome.

Về cơ bản, mục tiêu lượt truy cập cho một phần tử được ghi lại trong khi trình duyệt duyệt qua. Mỗi lần bạn đặt innerHTML, trình duyệt sẽ chuyển tiếp và lần cuối cùng việc này được thực hiện, trước khi sự kiện chạm được kích hoạt. Có một số cách xung quanh nó:

TÙY CHỌN 1: Bạn có thể đặt trình xử lý cảm ứng trên phần tử cơ thể và kiểm tra mục tiêu của sự kiện chạm để xem nó có đang chạm vào khối màu đỏ hay không. Mẹo của mũ để Paul Lewis cho phương pháp này.

http://jsfiddle.net/FtfR8/5/

var el = document.body; 
var redblock = $('.splash-section'); 

function handleTouch(e) { 

    console.log("handle touch") 
    if(e.target != redblock) { 
     return; 
    } 

    .... 

OPTION 2: Đặt một callback touch trống trên tài liệu dường như khắc phục vấn đề cũng - theo một số báo cáo lỗi liên kết, điều này gây ra việc thử nghiệm hit được thực hiện trên chủ đề chính là một hit về hiệu suất nhưng nó đúng cách tính toán các mục tiêu hit.

http://jsfiddle.net/LfaQq/2/

document.body.addEventListener('touchstart', function(){}); 

OPTION 3: Set innerHTML sau khi chuyển đổi đã kết thúc để buộc một relayout:

el.addEventListener(TRANSITION_END, function(e) { 
    console.log("trans end - offsettop:" + el.offsetTop); 
    el.style[TRANSITION] = ''; 
    el.innerHTML = 'Relayout like a boss!'; 
}); 

tôi đã tạo ra một báo cáo lỗi ở đây và Rick Byers đã liên kết với một liên quan lỗi với thông tin bổ sung: https://code.google.com/p/chromium/issues/detail?id=253456&thanks=253456&ts=1372075599