iOS issue with -webkit-overflow-scrolling: touch
-
I encountered a strange issue on iOS:
My app has a QModal which displays several form fields, all wrapped in QField. The modal also has a QBtnToggle which shows/hides certain form fields via v-if.
On iOS browsers, when toggling QBtnToggle to a different state, the content of QModal would suddenly disappear completely. Modal header is still shown. I can close and reopen the modal, and the content displays again.
- No error is thrown
- The error appears consistently an all iOS devices tested so far
- I was not able to reproduce on a clean JSFiddle so far. That is also the reason I have not yet filed a bug report on Github.
The error was very difficult to debug. I ended up with removing and adding components to isolate the issue with no success.
Them I came across this:
https://forum.vuejs.org/t/peculiar-rendering-bug-on-ios-with-v-bind-v-if-and-nested-single-file-components/22464User ‘andosteinemtz’ seemed to encounter exactly the same issue.
So i added the following to my app style and eureka, the bug is gone (but with that also the nice touch scrolling of iOS):
.scroll, .scroll-x, .scroll-y {
-webkit-overflow-scrolling: auto;
}So my question to you:
- Has anyone encountered anything similar while working with QModal?
- Does it make sense to have a workaround fix in the Framework? Some possible solutions without disabling the touch scrolling are described here https://stackoverflow.com/questions/7808110/css3-property-webkit-overflow-scrollingtouch-error and here https://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/. Have not tested them so far though.
-
horizontal scroll doesn’t work on touch in ios devices,scrollbar doesn’t show.have u any solution?