The Android experience is frankly terrible. The scaling and positioning of the controls are way off, there is crazy lag, it’s basically unusable. I think you’d be much better off implementing panning and zoom yourself and not using the browser’s. I’d look at how leaflet (the map library) does it and maybe even use it. (It should be possible to put the kinopio canvas in leaflet’s DOM with an SVGOverlay, which actually works on any element not just SVGs) An example of how it would look and feel is at https://kinopio-but-leaflet.glitch.me/ (Sorry the SVG of the space is a bit weird, it’s a converted PDF lol) (I’m sure there’s a way to make the scroll behavior match the way kinopio currently works).
yup you’re right android support isn’t great, partly that’s because I don’t have an android device to test on. Unlike with Safari, Chrome is seems like it renders and scrolls entirely differently than it’s mobile version.
- What android/browser are you using?
- if you open kinopio on chrome on your computer, open the web inspector and click the mobile view button: does this match what you see on android?
- in either case, it’ll be a while before I can go in and do what needs to be done for android. I wonder if in the meantime, I should show a message to android visitors that android isn’t currently supported? (setting expectations)
Bromite (An chromium fork with adblocking and other privacy features) on Android 8.1 but I can repro with Chrome and Firefox too.
Yep.
you mean with chrome and firefox on android?
Yes, that’s what I meant.
not a real fix, but for right now android users will get an error notification on load
Some reports of specific ways the UI is janky on Android: https://discord.com/channels/857305113936134204/857724063903252530/963185332474486784
Idea : If auto scrolling is the issue then maybe disable scroll at edges code on android and use that to debug
Hello! I’m the one who made the original report and yeah it seems very linked to the android native zooming + scrolling!
One related issue is how fast the cards will fling to the side on higher zoom levels, but when zoomed out fully it works as expected!
Here’s a video I recorded from my phone showcasing it. If any other recordings need to be done let me know!
This is on Android 12 and chrome
(Also, I “installed” kinopio as an app from the chrome web browser and weirdly, if I do the same on Firefox it only acts as though it’s a shortcut link and doesn’t make it full screen and everything like chrome does. Other web apps (like wordle) work done which is weird! But it’s not as important as the scrolling issue lmao)
that’s v useful thanks,
note to self: I remember looking into this years ago and had an issue where chrome mobile was just reporting incorrect values for things like window.scrollX position that caused these breakages. Maybe things are better/fixable now though?
note to self: https://stackoverflow.com/questions/9585487/cant-get-coordinates-of-touchevents-in-javascript-on-android-devices
Another android/Firefox user reported the logo flickering during scroll and jumpy card stick animations (which shouldn’t run on mobile at all)
bump: working on android issues next
every reported bug in this thread was reproduced and fixed, let me know how it goes!