Q-Scroll-Area not initializing and resizing properly in mobile (QResizeObservable)

[Jasqui]

I found a bug when using Q-Scroll-Area in mobile and I couldn't find anything elsewhere nor here in the issues or the q-scroll-area's documentation page regarding its use on mobile.

What happens:

So far I have tested this on Chrome's latest version in desktop (and using inspector for mobile) and also in an android's Chrome.

Whenever I enter my page in mobile the scroll area starts with 0 container height a 0 scroll height. This also results in scrollPercentage being "NaN" since it depends on these values and I believe it ends up doing a 0/0 division or something somewhere because of this. Basically it isnt receiving the height I'm giving it with the style in mobile.

If I enter instead on desktop mode it works perfectly fine. If I, after going in desktop mode without leaving or refreshing, change to mobile using the Chrome inspector it works perfectly fine aswell probably because the componet has already been initialized with correct height values and not just 0.

Also the container itself stays normal like as if it is using the default scroll. I guess this is because the q-scroll-area component uses classes that has scroll related css and since the style height is already defined it works.

But because of this issue I can't use the Q-scroll-area's methods, like I already do in desktop version of my website, in mobile. I mostly need it to know the scroll-position of that particular scroll-area.

This is how the q-scroll-area looks like in mobile after changing it through inspector. Worth noting that you can clearly see it is using the Quasar's default thumb style, while the other is using the default one. Same happens in desktop after exiting mobile mode with the bug, the thumb style goes to the default desktop one.

I also found out, using the Vue-dev-tool, that the resize event isn't firing at all in mobile!

How the code looks like:

One of my scroll areas is like this:

<div class="row justify-center">
    <div class="col-md-9 col-xs-12">
      <q-scroll-area
        :style="getScrollStyle"
        :class="getScrollClass"
        ref="dayColumnScroll"
        :thumb-style="{zIndex: 10000}"
      >
      <!-- content here -->
      </q-scroll-area>
   </div>
</div>

The getScrollStyle method just returns a given height. In this case it returns a css that uses calc() with vh so I at first thought that this may be the issue, but then I checked my other scroll area that uses a simple height and it didnt work aswell.

So nothing out of the ordinary. Just a normal use of q-scroll-area and, as I've mentioned before, works perfectly fine in desktop.

Thank you for taking your time and thank you for the awesome framework. Hope we can together solve this soon!

[Jasqui]

I found the solution to my problem by just comenting this line in the QScrollArea render function:

    render (h) {
    // if (!this.$q.platform.is.desktop) {
    //   return h('div', {
    //     staticClass: 'q-scroll-area relative-position',
    //     style: this.contentStyle
    //   }, [
    //     h('div', {
    //       ref: 'target',
    //       staticClass: 'scroll relative-position fit'
    //     }, this.$slots.default)
    //   ])
    // }
    ...

Apparently the reason for this is that, when in desktop mode, the QResizeObservable and QScrollObservable are called which is what I need even in mobile.

     ...
     }, [
        h('div', {
          staticClass: 'absolute full-width',
          style: this.mainStyle
        }, [
          h(QResizeObservable, {
            on: { resize: this.__updateScrollHeight }
          }),
          this.$slots.default
        ]),
        h(QScrollObservable, {
          on: { scroll: this.__updateScroll }
        })
      ]),

      h(QResizeObservable, {
        on: { resize: this.__updateContainer }
      }),
      ...

Any particular reason this was defined like this? I'm guessing possibly the fact that QResizeObservable isn't performance friendly if abused and that it could annoy some lower end phone users but idk.

I propose adding a prop to especify if you want to disable this behaviour or not.

Thanks in advance!

[rstoenescu]

QScrollArea is used only on desktop. It's purpose is to replace the default scrollbars which in some cases may ruin the overall design. On mobile, QScrollArea defers to a natural overflow: auto because there are no scrollbars anyway. This is by design...

[rstoenescu]

@realtebo Please do not cross-post. Your ticket has been handled already. QScrollArea requires an explicit height specified (as the examples show).