Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Disable Text Selection and Touch Callouts in a PWA on iOS

    reactReact
    16.6.3-16.8.6
    cssCSS
    javascriptJavaScript
    iosiOS

    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.

    Code

    Code

    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.