Disable Text Selection and Touch Callouts in a PWA on iOS
Because an installed PWA is really just a web app running in a browser, there are some browser behaviors that we may not want in our app, if we're going for a more "native" feel.
We'll first disable the ability to select text in our app by setting the css user-select options to none.
Then, we'll disable the iOS long-press "callout" menu by setting -webkit-touch-callout to none.
Instructor: [00:01] We have a PWA installed and running in standalone mode on iOS, but the user can still long press and select text that we may or may not want them to be able. Also, if the user long presses on a link, the page will navigate, but a touch call-out will pop up as well.
[00:20] These two both happen because our app is fundamentally a web app running in a web browser. In app.css, we can remove both of those behaviors by setting two settings on the body. First, remove the selection option by setting user select to none for our webkit, [indecipherable] , MS, and the base.
[00:42] Next, we can disable the touch call-out pop-up menu by setting webkit touch call-out to none. Then when we build and run that and run it on the iPhone again, now the text isn't selectable, and long pressing the link directs to the profile page and doesn't bring up the call-out menu.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!