Stack modal does not scroll well on iOS device

[admench]

Bug description

When opening an entries relationship stack selector, as expected the screen fills with the stack modal.

When scrolling this area on non-iOS devices, there is no problem. The issue arises when using an iPhone or iPad. It can be in Safari or Chrome, the issue remains.

The only way to scroll the area of the entries list is to use 2 fingers. And it is buggy even when you get it working.

Here you can see on Chrome on a Mac it works fine:

https://www.loom.com/share/3779f1107a2b444a9668e31fd8a1a396

But here on an iPad as you can see it doesn't work so well. The video doesn't show it, but single finger scroll does nothing. Sometimes two finger scrolling works but only 50% of the time.

statamic-scrolling-issue-iPad.mov

Here is a demo using an iPhone:

statamic-scrolling-issue-iPhone.mp4

How to reproduce

Use iOS device:

• Load an entry that contains a entries field set to stack selector
• Ensure there are enough entries in that relationship to have to scroll
• Try to scroll the list with 1 finger: it does not scroll at all
• Try to scroll with 2 fingers (as you have to do for instance, when scrolling an iFrame on iOS) - it sometimes scrolls but in a buggy way that often doesn't work.

Logs

No response

Environment

Statamic 3.4.7 
PHP v8.1.17

Installation

Fresh statamic/statamic site via CLI

Antlers Parser

runtime (new)

Additional details

No response

[admench]

I have tried some control panel css overrides such as:

.stack-content .overflow-scroll {
  -webkit-overflow-scrolling: touch !important; // no longer supported
  overflow-y: auto !important;
}

#statamic {
  height: 100%;
  min-height: 100%;
}

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */
  #statamic {
    height: -webkit-fill-available;
  }
}

Which unfortunately do not resolve the scroll issues on iOS

[admench]

I have the feeling it could be related to the body height, which I can refer to my readings here:

https://stackoverflow.com/questions/70883986/scroll-on-ios-does-not-scroll-entirely-down

Also the known overflow issues on iOS:

https://davidwalsh.name/scroll-iframes-ios

I've tried these solutions in various combinations listed in my cp.css snippet above to no avail.

[admench]

I see that the stack modal sets some styles on the body tag. Perhaps we could add some more logic to the body styles when opening the stack modal. e.g. not just overflow hidden, but possibly:

• position fixed
• padding right to match missing scroll bar

I'm just thinking out loud here, as I am pretty sure it can be solved with an approach something like this.

It can be Safari / Chrome, same issue. So perhaps it is iOS / webkit issue - admittedly still Apple's 'fault' even in Chrome!

[admench]

I see that statamic/cms has the following dependencies:

"body-scroll-lock": "^2.6.4", 
"vue-js-modal": "^1.3.33",

Body scroll lock has had a number of updates since the version mentioned above, including a fix for this issue: willmcpo/body-scroll-lock#207

Vue js modal has had a major overhaul building up to its latest v.2.0.1 release, including using proper events instead of delays for changing state, which could potentially help here.

[jackmcdade]

@jasonvarga — we're using a newer version of vue-js-modal in v4, but looks like we should also upgrade body-scroll-lock. Want to confirm that since the popper/modal/z-index stuff has been your wheelhouse lately?

[jasonvarga]

I'll sort it out.

[admench]

@jasonvarga just wondering- is this a mere case of updating the dependencies mentioned above?

If so I could put in a PR potentially, if you could tell me which Node version you use to install dependencies for Statamic.

Or is it more complex than that, and involves modifying some of the vue component code?

Finally, would upgrading to v4 solve this for my project? As it is in alpha I am unsure if I would want to make this upgrade because the project I am using this for is 95% complete and imminently going into production, once I can share that this iOS issue is resolved.

Thanks in advance for asking my questions!

[jasonvarga]

is this a mere case of updating the dependencies mentioned above?

No idea until I dive in. 🤷

Finally, would upgrading to v4 solve this for my project?

We'd probably be fixing this in v4 anyway, not v3.

[admench]

@jackmcdade & @jasonvarga

I have a client project that is now 99% complete after many months of work. They heavily rely on using iPads to input data, and this issue is a blocker for them to be able to use my Statamic implementation.

I would massively appreciate it if you could fix this issue and release it, ideally this early this week. Can you put a date on this? I hope if you look into it and find updating dependencies and making a few small code changes if necessary it can be done soon?

I hold multiple pro Statamic licenses including this current project that requires the iOS bug fixed.

Thanks in advance
Adam

[jackmcdade]

Got it fixed in v4, looking to see if it can be backported to v3.

[admench]

Thank you @jackmcdade - I could potentially upgrade to v4, but at this stage in the project and the fact that v4 is still not RC / production ready, I'd really appreciate a backport to v3. Thank you 🙏🏼 ❤️

[o1y]

@jackmcdade Lol, I just prepared the commit with the V3 fix:d95e5b3

But your code from V4 can be backported 🪄

[jackmcdade]

@o1y 🤦 thanks for the effort!

[o1y]

I can still PR the v3 fix (with your touch move overflow-scroll selector), if you want? :) Just tested in on my devices.

[jasonvarga]

It's okay we got it, but thanks!

[admench]

@jackmcdade @jasonvarga how can I get my hands on the newly merged changes in v3?

Would updating my composer.json to point to the specific commit work? I presume you have some sort of build action that generates the FE assets for the Control Panel? Thanks in advance.

[admench]

By the way thank you for backporting it !

[jasonvarga]

I've just tagged 3.4.9 which contains this fix. By the time you read this the release should be available.

[admench]

Thank you @jasonvarga

[sebszocinski]

Hi, just jumping into this one as i've had the same issue as @admench - we have a client that relies heavily on using an iPad to update and manage content, I read all of this and got excited and updated to the latest version of Statamic (4.24) only to find that this issue still very much exists!?

I hope im just missing something but scrolling in a Stack constantly stops working, mostly after entering into a field and making a change and then focusing out. Sometimes scrolling with two fingers works but then that stops too and you're completely stuck.

It would be great if a fix could be made asap.

[admench]

@sebszocinski this was fixed in 3.4.9 and also in v4 but it sounds like you have seen it happen again. There may have been a regression. I'd recommend checking the files in the related PR and compare to the more recent statamic release to see if there has been any changes.

[sebszocinski]

@admench It's still a mess for me on the several iPads i've tested. The stack modal just doesn't like to scroll and even when trying to focus on a div it gets stuck. It's unusable. You can test it by just trying to edit a blueprint and get the stack modal on an iPad/touch device.
It seems like body-scroll-lock has been abandoned since and there aren't many updates since.