Hi,
I made a layout with the Quasar framework (quasar 1.9.9 - extras 1.6.0).
My layout works fine on Chrome Android (Oreo) but is not working correctly on Safari iOS (12.4.5)
The project can be found at https://github.com/eric-naguras/quasar-test and a hosted version which can be opened in a browser on Android and iOS is at http://test.naguras.com/#/
The problem is in the Drawer. I have a long list with q-list-items so I wanted to show the user that he/she can scroll up or down through the list. I did this by adding a chevron icon above and below the list. I have also added the quasar scroll directive in quasar.conf.js and I show or hide the chevron icons depending on the scroll position.
The android version works exactly as I planned but the iOS version has problems scrolling (it’s unresponsive and if you scroll to far it will show white boxes above or below in the drawer)
Since I am only using the build-in Quasar position classes I think it’s a bug in Quasar.
Does someone has this problem too and is there a fix or work-around?
The methods used and the html markup can be found below.
There should be 2 screenshots; the first is Safari - iOS, the second is Chrome on Android.
methods: {
showTopScrollIcon() {
console.log(this.scrolPosition);
return this.scrolPosition > 20;
},
showBottomScrollIcon() {
console.log(this.scrolPosition);
return this.scrolPosition < 100;
},
goto(link) {
this.$router.push(link);
},
scrolled(position) {
this.scrolPosition = position;
}
}
<div
class="bg-secondary absolute-top"
style="margin-top:60px;height:20px"
>
<q-icon
v-if="showTopScrollIcon()"
style="margin-left:120px"
color="primary"
:name="evaArrowheadDownOutline"
/>
</div>
