Pull to refresh with scroll area

[koeqaife]

What happened?

when you use pull to refresh together with scroll area, on phones there is no possibility to scroll up because it uses pull to refresh instead of scroll, the problem partially disappears when you use pull to refresh inside scroll area but there are other problems (there is a problem with displacement and strange lags).

What did you expect to happen?

When not at the top of the list and you scroll up it updates the content instead of scrolling up

Reproduction URL

https://stackblitz.com/edit/quasarframework-stackblitz-templates-mibhij?file=src%2Fpages%2FIndexPage.vue

How to reproduce?

1. Enable “phone” mode in your browser and reload the page, or access the page from your phone
2. Scroll down and then try to scroll up

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Android

Quasar info output

Operating System - Linux(6.11.8-zen1-2-zen) - linux/x64
NodeJs - 23.1.0

Global packages
  NPM - 10.9.0
  yarn - 1.22.22
  @quasar/cli - 2.4.1
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.17.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.10.2 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.13 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.5.12 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.4.5
  pinia - 2.2.6 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.18 -- Native-ESM powered web dev build tool
  eslint - 8.57.1 -- An AST-based pattern checker for JavaScript.
  electron - 33.2.0 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - Not installed
  @electron/packager - 18.3.5 -- Customize and package your Electron app with OS-specific bundles (.app, .exe, etc.) via JS or CLI
  electron-builder - 24.13.3 -- A complete solution to package and build a ready for distribution Electron app for MacOS, Windows and Linux with “auto update” support out of the box
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - latitude-3420
  wlp0s20f3 - 192.168.1.35

Relevant log output

No response

Additional context

No response

[rstoenescu]

Hi,

Devtools "mobile" is only an "emulator" of the mobile behavior and should not replace a real device. This is one of those cases, where it works correctly on a real device yet it fails in devtools.

[koeqaife]

it's not working correctly on phone

[koeqaife]

I initially noticed this problem on my phone, then checked in devtools

[koeqaife]

pull to refresh doesn't work if you scroll down and then scroll up, but if you stop and then start scrolling up then the problem is that I can't scroll up normally

[koeqaife]

I'm very unhappy that you closed the issue, because I never found a solution to the problem and I had to disable the pull to refresh component because of such problems

[koeqaife]

I already tried in chrome and brave browsers

[rstoenescu]

You need to understand that what you want to achieve means overlapping a lot of user touch interactions (both for QScrollArea and for QPullToRefresh). Still, it works, but it is very odd to have your specific setup. Simply because the QScrollArea will have that height and page scrolling will also come into play after the QScrollArea container reaches its scroll limits. And then QPullToRefresh comes into action, only if the page scrolling (not the scroll area container or any other) is at the top of the page scroll. You could in theory be scrolling the page itself a bit, not just the scroll area so QPullToRefresh does what is meant to do in this case, which is to not trigger. In any case, this setup is prone to having a bad user experience to begin with. Do you really need the QScrollArea? Why not let the normal page scrolling do its thing.