Subscribe on changes!

TransitionGroup transition causes touchmove events to stall

avatar
Apr 28th 2023

Vue version

v3.2.47 and v3.3.0beta

Link to minimal reproduction

https://play.vuejs.org/#eNp9U8Fu2zAM/RXCGJAEcOS0XXdw3SI7DLvsth421D0oNttosSVBot0UQf59lOwUbjY0B0cUHx/JR/GQfLVW9B0meVL4yilL4JE6e1dq1VrjCA7g8AmO8ORMCzOGzkpdGe0JrPGKlNFwGyDzwz6HVQqv/D0ubkpdm6prUZOQdf2t58MP5Qk1uvmMTFdtW9PjLIX5JwzOBdzewaHU8EYretl0yOTxFoDpB6gg6Z6R7gMJ+ofVo+DKEfWvdAByBR8Df0fgsdTHBZyaUZqTyobTPVykl+lV+jm9fuQuBm/DpY9tPgghRvDj4uR3yKoxYB7bCOi36qd45iuyQWYWmA3C1jaSkC2AIqgeGjgcThocuUh2ZIOn2HRErPe6alS1uy2TmLZM7uJ/kQ3uAXrvpB44vjvTWRipi1r13HM4xl+/fDKOmRRXkrIINe75Gzsokykw3+HriHvvWMdhepaa2D8KFRUg89NyoVjPI28KF4symUR6em2QYzbG1ehyuLR78KZRNWwaWe1uoOXxKZ1/sfsbeFE1bXO4XgVji+p5S6P1jnNsM2gYSh30Cwpy34Mw2ZkyfFtkkzmwGQvjo+iX/IrQLWVFqkd+NXzToOxxvBmeJr0R5iCbBi48oPTIw+bsE5awQVMOMkO8sbJSFPbmFMKPJJaQpMmwhctWWvHHG817GmN4EtHhyyQ/LUiZ8HYGu0y2RNbnWdZpu3sWlWmzNfsy12lSLS5r066vxJVYLTdIUlyyOp6mXoG+XW6cefHoOG+ZjKsVU2R82XM/DnmsDt2HKc+w/0l7hvgn9WlXk+NfYIiRtg==

Steps to reproduce

On a device with touchscreen, touch and hold one of the squares in the list. Keep moving the screen with the finger or pencil.

What is expected?

You can keep moving touch events during and after transitions.

What is actually happening?

Once the transition is done, "in-flight" touchmove events no longer get registered. You can see this from the coordinates no longer getting updated.

System Info

System:
    OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 3.12 GB / 15.35 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    npm: 8.19.3 - ~/.nvm/versions/node/v18.13.0/bin/npm
  Browsers:
    Brave Browser: 112.1.50.114
    Chrome: 112.0.5615.165
    Chromium: 112.0.5615.49
    Firefox: 112.0.1
  npmPackages:
    vue: ^3.2.47 => 3.2.47

Any additional comments?

Not that this is different per browser: On Edge, Chrome this happens. On Firefox this does NOT happen. It might therefore be a browser bug in touch events.

Workaround is to use pointer-events in stead.