Android 4 Problem z testowaniem trafień dotykowych Chrome na zdarzenia dotykowe po transformacji CSS

Question

Mam problemy z połączeniem transformacji CSS i testowaniem trafienia zdarzenia dotykowego. Powtarza się to tylko w Chrome na Androida 4 (stabilne i beta). Safari na iOS, a także pulpit Chrome z emulacją dotykową, wydają się działać poprawnie.

Jestem prawie pewien, że to musi być błąd, więc myślę, że głównie szukam obejść tutaj.

Kwestia polega na tym, że testowanie trafień tylko dotykowych wydaje się działać w przypadku, gdy element był przed transformacją, a nie w pozycji końcowej. Możesz zobaczyć przykład na moim jsfiddle (tylko na Androida 4 Chrome):

jsfiddle: http://jsfiddle.net/LfaQq/ pełny ekran: http://jsfiddle.net/LfaQq/embedded/result/

Jeśli przeciągnij niebieskie pole w połowie drogi w dół ekranu i puść to przystawki z powrotem do szczyt. Teraz, jeśli spróbujesz ponownie przeciągnąć z górnej połowy strony, żaden dotyk się nie zarejestruje. Zdarzenia dotykowe nie są nawet wystrzeliwane z elementu. Jeśli jednak spróbujesz dotknąć dna elementu, działa dobrze. Możesz spróbować przenieść go od dołu i obserwując, że testowanie trafień nie działa już na dole, ale działa na górze.

To jak ja obsługi zdarzeń:

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] = ''; 
}); 

nie mam żadnych problemów z przekształceń w touchmove, jak te nie są nowe akcenty, które mają być wykrywane i tak.

Wszelkie sugestie?

Answer 1

To jest nietypowy błąd w Chrome.

Zasadniczo cele trafienia dla elementu są rejestrowane podczas przechodzenia układu przez przeglądarkę. Za każdym razem, gdy ustawisz innerHTML, przeglądarka przepisze się, a ostatnia, kiedy to zrobisz, przed zdarzeniem touchend. Jest kilka sposobów:

OPCJA 1: Możesz ustawić obsługę dotykową na elemencie ciała i sprawdzić cel zdarzenia dotykowego, aby sprawdzić, czy dotyka on czerwonego bloku. Końcówka czapki dla Paula Lewisa dla tego podejścia.

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; 
    } 

    .... 

OPCJA 2: Ustaw pusty dotykowy zwrotna na dokumencie wydaje się rozwiązać ten problem, a także - według niektórych powiązanych raportów o błędach, to powoduje, że testowanie hitem być zrobione na główny wątek, który jest hitem wydajności, ale poprawnie oblicza trafione cele.

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

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

WARIANT 3: Zestaw innerHTML po przejściu zakończyła wymusić relayout:

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

Został utworzony raport o błędzie tu i Rick Byers został połączony z powiązanym bug z dodatkowymi informacjami: https://code.google.com/p/chromium/issues/detail?id=253456&thanks=253456&ts=1372075599