Scrollability Issue with Touchpad Two-Finger Gesture

adobe / leonardo

Generate colors based on a desired contrast ratio

http://www.leonardocolor.io

Apache License 2.0

1.97k stars 108 forks source link

Scrollability Issue with Touchpad Two-Finger Gesture #214

Open dev-k98 opened 1 year ago

dev-k98 commented 1 year ago

Description

While browsing the web page, I encountered an issue where I am unable to scroll using my touchpad or arrow keys. It seems to be a bug. The only way I can scroll is by hovering over the tabled content and then using a two-finger gesture/arrow key, or by grabbing the scrollbar. Is this behavior intended or should scrolling be possible using the touchpad and arrow keys throughout the page?

Could this be an issue with the Chrome version?

Steps to reproduce

Go to http://leonardocolor.io/
try scrolling using your touchpad/arrow keys

Expected behavior

Should be able to scroll the content with touchpad gestures

Screenshots

Environment

Browser(s) and OS(s):

Additional context

Using a Dell Latitude 3520 with Chrome Version 112.0.5615.49 (Official Build) (64-bit)

GarthDB commented 1 year ago

I just tried scrolling with the arrow keys and touchpad on a mac, and it seems to work. I don't have a PC laptop to test it out, but I'm sure it's super frustrating. I'm wondering if we turned off mouse events on .appFrame (which is setting overflow to hidden) if it could do something to help.

k-sav commented 1 week ago

The problem could be related to 3rd party extensions that add DOM nodes as a child of body.

CleanShot 2024-11-16 at 15 34 39

In my case, Loom extension had added #loom-companion-mv3 to the body without any css. And because body.appFrame has display:grid, #loom-companion-mv3 was blocking all the scroll and click events.

If I either:

remove #loom-companion-mv3
set #loom-companion-mv3 to display:none
set #loom-companion-mv3 to pointer-events:none
remove display:grid from body.appFrame or
visit https://leonardocolor.io in an incognito window

the problem goes away.