Layout problem on Safari iOS - Chrome Android works fine

[eric-naguras]

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>