In our javaScript game we are having a problem where "touchmove" events are slow and "janky" until an orientation change at which point they become smooth again.
The slowness returns when the game does a lot of work like loading a level.
Here is a video that show the slow touch move in action, and the orientation change which fixes the issue.
The following warning does appear in the log
Handling of 'touchmove' input event was delayed for 141 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responive.
However, the slow events persist well after the game has stopped doing heavy lifting like loading a level and building sprites.
I cannot use passive handlers in any case becuase panning the map must preventDefault to stop the interface scrolling as well.
I assume the slowness is related to touch events as I have measured how often the touch handlers are called and they seem strange.
Will receive 5-10 events in a row in under ~20ms, then there will be one that is about 150-200ms, then another batch of fast events, and another slow one.
After the orientation change, all events are received in under 20ms
I have also measured my responses from requestAnimationFrame and they seem to be a fairly solid 16.8ms
For those intrested you can see the problem yourself at https://blight.ironhelmet.com
The problems occur in Chrome and Cordova, both native and using Crosswalk. The problems do not occur on Safari on iOS or any tested Desktop browser.
I would like to know if anybody else had this problem and how I might go about fixing it.
Is possible to force an "orientation change" or whatever happens during an orientation change, using javaScript?
The hardware renderer was not kicking in, and the slow software rendering was slowing event processing. (drawing pixels from one canvas to another)
After an orientation change, it seems that the garbage collector cleaned up unused canvases which enabled the hardware renderer to kick in.