Al momento, sui dispositivi touch, si generano due problemi differenti, durante lo swipe della carta.
Se ci troviamo su un desktop / laptop con display touch, nel momento in cui si prova a swipare verso destra o, specialmente, sinistra, si triggera la funzionalità di navigazione propria del browser che consente di navigare avanti ed indietro nella history di navigazione.
Ciò, oltre a portare erroneamente l'utente in altre pagine interrompendo l'esperienza di gioco, causa un calo DEVASTANTE delle prestazioni di animazione della carta che, arriva, addirittura a raggiungere i 2/3 frame al secondo.
Se ci troviamo, invece, su uno smartphone / tablet, si generà pressoché lo stesso problema appena descritto.
Questa volta, però, accade sull'azione dello swipe dall'alto verso il basso che triggera, infatti, la funzionalità nativa del browser di reload della pagina.
Ciò rimane, sicuramente, meno probabile (visto che lo swipe, solitamente, avviene verso DX o SX) ed degrada meno l'esperienza di gioco (in quanto, pur dopo un breve caricamento della pagina, l'utente si ritrova sempre nella stessa); nonostante ciò, risulta comunque essere frustrante e DELETERIO per l'esperienza dell'utente finale.
È necessario risolvere entrambi i problemi.
Possibilmente, non semplicemente disabilitando queste funzionalità native del browser (che, per l'utilizzatore finale potrebbero essere comunque utili) ma, più che altro, evitando che vengano triggerate solo e soltanto nel momento in cui l'utente sta swipando la carta altrove.
Potrebbero non essere la soluzione definitiva, in quanto disabilitano completamente queste funzionalità (in ogni caso).
Potrebbe, invece, fare al caso nostro l'uso di un { capture: true } sull'addEventListener e / o l'uso di un preventDefault() / stopImmediatePropagation() durante l'esecuzione della callback dello stesso?
Al momento, sui dispositivi touch, si generano due problemi differenti, durante lo swipe della carta.
Se ci troviamo su un desktop / laptop con display touch, nel momento in cui si prova a swipare verso destra o, specialmente, sinistra, si triggera la funzionalità di navigazione propria del browser che consente di navigare avanti ed indietro nella history di navigazione.
Ciò, oltre a portare erroneamente l'utente in altre pagine interrompendo l'esperienza di gioco, causa un calo DEVASTANTE delle prestazioni di animazione della carta che, arriva, addirittura a raggiungere i 2/3 frame al secondo.
Se ci troviamo, invece, su uno smartphone / tablet, si generà pressoché lo stesso problema appena descritto.
Questa volta, però, accade sull'azione dello swipe dall'alto verso il basso che triggera, infatti, la funzionalità nativa del browser di reload della pagina.
Ciò rimane, sicuramente, meno probabile (visto che lo swipe, solitamente, avviene verso DX o SX) ed degrada meno l'esperienza di gioco (in quanto, pur dopo un breve caricamento della pagina, l'utente si ritrova sempre nella stessa); nonostante ciò, risulta comunque essere frustrante e DELETERIO per l'esperienza dell'utente finale.
È necessario risolvere entrambi i problemi.
Possibilmente, non semplicemente disabilitando queste funzionalità native del browser (che, per l'utilizzatore finale potrebbero essere comunque utili) ma, più che altro, evitando che vengano triggerate solo e soltanto nel momento in cui l'utente sta swipando la carta altrove.
Da capire come.
Tempo fa mi ero annotato queste poche righe di appunti: https://github.com/Bylothink/do-you-dare/blob/07856e376f3b3899cfb866055fe407e1955a63c3/src/assets/scss/main.scss#L11-L13
Potrebbero non essere la soluzione definitiva, in quanto disabilitano completamente queste funzionalità (in ogni caso).
Potrebbe, invece, fare al caso nostro l'uso di un
{ capture: true }sull'addEventListenere / o l'uso di unpreventDefault()/stopImmediatePropagation()durante l'esecuzione della callback dello stesso?