search

calcom / cal.com

Scheduling infrastructure for absolutely everyone.
https://cal.com
Other
32.67k stars 8.11k forks source link

[CAL-4156] Stripe App - overflow-y-auto limits scroll range on mobile device #9523

Open devarcher opened 1 year ago

devarcher commented 1 year ago

Issue Summary

On the Stripe Payments page in the embedded CalCom React Component, the tailwind setting overflow-y-auto limits the scroll range on a mobile device. User is unable to scroll to bottom of page and / or stripe component unless user clicks into form to fill out payment info.

Please note, in developer tools, scrolling behavior seems to work ok although there is a scroll inside scroll behavior. On an iPhone device, the behavior breaks, and user is unable to scroll the page as expected.

Steps to Reproduce

  1. Open site on physical device (not developer tools emulation)
  2. Attempt to scroll page.

Any other relevant information. For example, why do you consider this a bug and what did you expect to happen instead?

Considered a bug as user is unable to scroll through page as expected unless they begin to click into form fill out payment info. Even then scroll behavior is odd as it is a scroll (form) within scroll (page) behavior.

Technical details

This line causes behavior

<div class="fixed inset-0 z-50 overflow-y-auto scroll-auto">

Changing to 

<div class="fixed inset-0 z-50">

Could fix the behavior. I'm unable to test on my mobile device, but the scroll in scroll behavior stops in dev tools, so I'm optimistic.

CAL-4156

PeerRich commented 1 year ago

do you have a screenshot of before and after? feel free to raise a PR too