I'm now working on an android app using Cesium.
I noticed that while swiping the map, if I tap the "overview button" (the square button at the bottom) and then go back to my app, the map doesn't move smooth anymore.
So I tested it in Chrome and Opera mini and Chrome didn't cause the same problem but Opera mini did. Even if I reload the page, the issue continued.
Is there anyway to prevent or recover this?
This is my code for testing.
var viewer = new Cesium.Viewer('cesiumContainer');
I don’t think I’ve encountered this issue before. Do you know if this happens just in your Android app setup, or does it happen when viewing Sandcastle (https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/) on your Android phone through a browser? Does it happen on desktop browsers for you?
How are you packaging the Android app with Cesium? Are you using Cordova or something else?
This issue happens not only in my app but also in Opera mini, browsing Sandcastle. As far as I know it only happens on Androids excluding Chrome. My Mac and iPad didn't occurred this issue.
I believe this will happen easily. If you have an Android device and downloaded Opera mini and opened Sandcastle, while swiping the map and while your finger is still following the display, with your other hand tap the overview button and go back to Opera mini and you will get the awkward map. And if you're running my test code, I think the log will let you know what's happening.
Click on the full screen button in the bottom right corner of the app
Use your finger to move/drag the map
And the result is that the touch event stops firing? If so, I am unable to recreate this. I’m testing on a Google Pixel 3, Android version 9, Opera Mini version 43.
Let me know if you have a different setup or if I misunderstood your steps.
The button I mentioned is one of the three navigation buttons Androids have.
'back' button, 'home' button and 'overview' button (or maybe you call it 'recents' button).
In this case I am using 'overview' button but the 'home' button will also do the equivalent.
To cause this issue is to intercept the map drag event with these buttons.
1. Put your device on the table and keep both your hands free.
2. Open Sandcastle with 'Opera mini' and show the globe enough large, to be able to drag from the left to the right of the view.
3. Start dragging from the left toward the right.
4. When your finger is to reach about the center, push the 'overview' button with your other hand.
5. After the screen switched to the 'overview' then end dragging. And go back to 'Opera mini'.
6. Try to drag again and it's it.
If pasting my code or opening the url Omar has prepared, the log from cesium should look odd.
In Pixel 3 these buttons seems to be replaced to gestures. Is that right? So it may not be able to reproduce this issue in the same way.
I see what you’re saying. Thanks for the additional explanation. Those buttons are indeed gestures on the Pixel 3, so that may be why I’m unable to recreate it, but it sounds like the issue is that the event listener for the start of the drag is fired, but the event listener for ending the drag is never fired. Kind of like what would happen if you click inside a canvas, but then release the mouse outside the canvas.
If I cause this issue, while the 'pointermove' events are invoking, the 'pointercancel' event will invoke, which seems OK.
But after that 'pointercancel' invokes every time I try to drag the map. The cancel event was working like a brake.
I think the 'pointermove' event has got a problem, so it invokes the 'pointercancel' event.
After causing the issue the log looks like this.
So my solution for now is, force use the 'TouchEvent' instead.
Cesium.FeatureDetection.supportsPointerEvents = ()=>false;
I don't know why but the 'TouchEvent' doesn't cause the same issue.
If somebody knows a better solution I'd like to know.
Answers to your questions.
To recover this issue is to open it in a new tab or quit the browser once.
It didn't recover by reloading or reopening the browser.