Layout problem on Safari iOS - Chrome Android works fine

  • 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 and a hosted version which can be opened in a browser on Android and iOS is at

    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() {
          return this.scrolPosition > 20;
        showBottomScrollIcon() {
          return this.scrolPosition < 100;
        goto(link) {
        scrolled(position) {
          this.scrolPosition = position;
            class="bg-secondary absolute-top"

    safari on iOS

    chrome on android

Log in to reply