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 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>
    

    safari on iOS

    chrome on android


Log in to reply