Shepherd.js modal not scrollable on iOS devices in Vue 3 and Quasar project

[komaromiGyorgy]

Description

I'm experiencing an issue where the Shepherd.js modal is not scrollable on iOS devices (iPhone and iPad) when used within a Vue 3 and Quasar project. The modal works as expected on other platforms (Android devices and desktop browsers), but on iOS, users cannot scroll through the modal content, making it unusable for content that exceeds the viewport height.

Expected Behavior

The Shepherd.js modal should be scrollable on iOS devices, allowing users to view all content within the modal by scrolling vertically.

Current Behavior

• On iOS devices (Safari browser):
  • The modal displays, but users cannot scroll within the modal.
  • Attempting to scroll either scrolls the background content or has no effect.
• On other platforms:
  • The modal is scrollable as expected.

Steps to Reproduce

1. Set up a Vue 3 project.
2. Install and configure Shepherd.js to display a modal with content exceeding the viewport height.
3. Open the project on an iOS device (iPhone or iPad) using Safari.
4. Trigger the Shepherd.js modal.
5. Attempt to scroll within the modal content.

Alternatively

You can go to the ShepherdJS home page and when the shepherd modal comes add more content to it by duplicating the current paragraphs until it becomes larger than the viewport height

Environment

• Shepherd.js Version: 13.0.3
• Vue Version: 3.4.38
• Quasar Framework Version: 2.14.0
• iOS Version: iOS 17.2
• Devices Tested: iPhone 15, iPad Air (5th gen)
• Browser: Mobile Safari
• Development OS: macOS Ventura 13.6.9

Attempts to Resolve

I have tried the following solutions without success:

1. Adding -webkit-overflow-scrolling: touch:

   .platform-ios
     .shepherd-content
       -webkit-overflow-scrolling: touch
       max-height: 70vh

2. Changing max-height units:

   • Replaced 70dvh with 70vh.

3. Adjusting overflow-y:

   • Changed overflow-y: auto to overflow-y: scroll.

4. Modifying .shepherd-element positioning:

   .shepherd-element
     position: absolute
     top: 50%
     left: 50%
     transform: translate(-50%, -50%)
     max-height: 90vh
     overflow: visible

5. Ensuring no parent elements have overflow: hidden or position: fixed.

6. Trying to make the whole viewport scrollable by allowing the modal to overflow

Despite these attempts, the modal remains non-scrollable on iOS devices.

Additional Information

• No Console Errors:

  • There are no JavaScript errors or warnings in the console when testing on iOS devices.

• No Third-Party Libraries Interfering:

  • I have checked for any other libraries that might interfere with touch events, but none are present.

• Body and HTML Overflow Properties:

  • Verified that overflow: hidden is not applied to body or html when the modal is open.

Request

I would appreciate any guidance on resolving this issue. Specifically:

• Are there known issues with Shepherd.js modals and scrolling on iOS devices?
• Is there a recommended approach to enable scrolling within the modal without altering the HTML structure?
• Could this be related to how Shepherd.js interacts with Vue 3 or the Quasar framework on iOS?

Thank You!

[chuckcarpenter]

@komaromiGyorgy just a heads up that we've seen this issue and does seem like a bug. I don't have any obvious fix as of now and we've definitely had tours in the past where this worked, so not clear when it was introduced. Digging into ideas for a fix, but please let us know if you find something that works.

[chuckcarpenter]

Another follow up, I came across this example with a similar issue in mobile Safari, so I think it's device specific https://xop8k.csb.app/

[RobbieTheWagner]

I might be completely wrong here, but I remember there being some framework or library folks were using and it messed with the styles because it wrapped stuff in shadow DOM or something. Is this ringing any bells or possibly the issue here?

[komaromiGyorgy]

@RobbieTheWagner I don’t think so. I tried reproducing on the docs website by just duplicating the text inside the body of the modal and the scrolling issue is present there as well.