Fix: Prevent scrolling and interactions below a modal on mobile

[rbf]

pointer-events: none; does not have the expected effect on mobile. I added touch-action: none; which seems to work as expected (at least on the use cases I tested).

Please note that I only added touch-action: none; in scss/components/_modal.scss and the ran npm run build as suggested in the contribution guidelines. The diff looks a bit big to my expectations. Hopefully I didn't mess something up.

In any case, thanks for your work on pico! ❤️

Cheers!

[lucaslarroche]

Hi @rbf,
Thank you ❤️. That is definitively a bug, and I will merge your PR.

Weird. If I rebuild your branch, I have differences.
I guess it’s related to a difference in our caniuse database... but it should be locked in the package-lock.json
You could try to delete node_modules and reinstall npm i
If you still have a large diff after, I will simply rebuild on my side.

Also, I am working on v2 (PR, Project). If you wish, you can also open another PR against v2 branch.

Note, v2 is using yarn:

• Install: yarn
• Build: yarn build

[rbf]

Hi @lucaslarroche,

Thanks for you kind reply.

I guess it’s related to a difference in our caniuse database... but it should be locked in the package-lock.json. You could try to delete node_modules and reinstall npm i

Indeed, I must have had something weird going on in my node_modules folder. I deleted it and rebuilt the project as you suggested and the diff is now much smaller: it went from changes in 22 files down to 9 files. I force-pushed the changes to the same branch. I hope that is ok for you.

Also, I am working on v2 (#261, Project). If you wish, you can also open another PR against v2 branch.

Of course, here you are: #273.

Cheers.

[jacksongoode]

I was just about to post this issue as well, glad there is a fix!

[lucaslarroche]

@rbf, sorry for the delay.
I just merged your PR into dev, I will add a few more fixes before merging into master.
Thank you again.