question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Hidden q-drawer slows down scrolls on any element inside the app significantly

See original GitHub issue

Describe the bug I have some overflowed divs which can be scrolled along the x axis. Scrolling by touch is smooth if I don’t use q-drawer; however, it becomes janky once I add q-drawer.

Platform (please complete the following information): Android: Chrome 83 on Android 10

image

I am not sure exactly how touch handler is working on q-drawer and why it slows down the scroll and if no-pointer-events still intercepts the touchs and just ignores them or what; however, looking at it differently, the issue is that the backdrop takes the whole screen in the first place even if drawer is closed.

Current behavior: drawer backdrop takes the whole screen even if drawer is closed and no-swipe-backdrop is set true (it seems currently it’s just sent to back by modifying its z-index?)

Expectd behavior: drawer backdrop should not be displayed (display: none) if drawer is closed and no-swipe-backdrop is enabled

(I’d say since how big of a performance hit this is, probably in the next major revision no-swipe-backdrop should be turned on by default if the performance can’t be improved without removing the backdrop from display)

image

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:13 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
webnoobcommented, Jul 10, 2020

Available in 1.12.9

1reaction
pdanpdancommented, Jul 6, 2020

Thank you for checking 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Drawer MUI component persistent animation is super slow ...
I'm building this app, and, as you can see, we have a left drawer and a ... But, when there's too much data...
Read more >
Chapter 4. Screen and UI Performance - O'Reilly
In this chapter, we'll discuss how to optimize your UI for fast rendering and scrolling/animations, and the tools you can use to profile...
Read more >
Prototype scrolling with overflow behavior - Figma Help Center
Vertical scrolling allows users to swipe or scroll up and down within a frame. Use this behavior to mimic scrolling down a long...
Read more >
Using CSS Transitions to SlideUp and SlideDown - Rick Strahl
In a mobile app I've been working on there are a few animations to drop down additional content as needed when clicking on...
Read more >
Take control of your scroll - customizing pull-to-refresh and ...
When they reach the bottom, the overflow container stops scrolling because there's no more content to consume. In other words, the user reaches ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found