Prevent iOS Safari selections and context menus

Interactive components such autoplaying “stories” often listens on “tap-and-hold” to pause the whole thing. In this case selection marks and contextual menus are really annoying.

Until iOS13 the event listener oncontextmenu could be used to prevent context menus. (and still make sense for Android based touch devices today)

After almost giving up removing these things for iOS Safari I found the simplest possible solution in CSS:

.story,
.story * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

This prevents iOS context menus and blue selection frames for the .story selector and any of its children.

Leave a Reply