I have a device running a webserver hosting a web application (Vue.js). On a tablet (Huawei Mediapad T3 10) with Android 8 and WebView version 70.0.3538.110, featuring a resolution of 1280x800, I utilize a kiosk app to display the web application in fullscreen using WebView (our APK).
Now, we aim to transition to a tablet equipped with Android 12 and boasting a resolution of 1920x1200, running WebView version 102.0.5005.125.
Initially, most functionalities seemed to work seamlessly after simply installing the old APK on the new tablet. However, a new issue arose with the vertical sliders. While the horizontal sliders function as expected, the vertical ones now require a slight movement in the X-direction before allowing movement in the Y-direction. In other words, tapping the slider button, followed by a small left or right movement, enables sliding functionality. Otherwise, attempting to slide solely in the Y-direction proves ineffective.
I've also experimented with Chrome and Opera browsers (instead of webview), encountering the same issue with the vertical slider, also on Android 13.
I'm seeking a solution to this problem without altering the Vue.js web application itself.
Has anyone else faced a similar issue? Were there significant changes regarding Touch Slop or Touch Event Order, or has this to do with the resolution change?
Is there a potential resolution through adjustments in the APK or Tablet/Android settings?
Fixed it with using the "vue-slider-component" instead of the "input type range slider". It was possible to turn the second one with "--webkit-appearance="slider-vertical"" but then I was not able to change the thumb anymore. So with the other slider it now works like a charm.