-webkit-touch-callout: Browser Support, Values, Use Cases

What is -webkit-touch-callout?

-webkit-touch-callout is a CSS extension the WebKit team added to control the system callout, the action sheet that pops up on a long press in iOS Safari. It accepts two values, default and none, and only mobile WebKit ever shipped it. Apple documents the property in the Safari CSS Reference.

Which browsers does -webkit-touch-callout support?

Only Safari on iOS and iPadOS ever shipped -webkit-touch-callout. Every desktop engine, every Chromium build, and every Gecko release parses the rule and then ignores the value.

What are the values of -webkit-touch-callout?

-webkit-touch-callout accepts two declared values, default and none. Each one tells iOS Safari whether to show or hide the system callout when the user presses and holds a touch target.

• default: The initial value. iOS Safari shows the system callout, the action sheet with Open, Copy Link, Save Image, and similar entries, on a long press. Most pages never set this value explicitly, since it is the platform default.
• none: Suppresses the callout on the matching element. The long press still fires touchstart and contextmenu events, so a custom JavaScript handler can run, but the iOS action sheet never appears. The value is the only reason most teams reach for this property.

The snippet below shows the typical drag-handle pattern, an iOS-only @supports gate, and a child override that re-enables the callout. Paste it into a stylesheet and the rules take effect on the next paint.

/* Suppress the iOS long-press callout on a custom drag handle. */
.drag-handle {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* iOS Safari only: tighten a touch target without breaking other browsers. */
@supports (-webkit-touch-callout: none) {
  .drag-handle {
    touch-action: none;
  }
}

/* Re-enable the default callout on a child if a parent disabled it. */
.allow-callout {
  -webkit-touch-callout: default;
}

-webkit-touch-callout is non-inherited, has no shorthand, and has no animation type. The property only changes the system callout, not the magnifier loupe or the text-selection handles, so pair it with -webkit-user-select: none when you want to lock both behaviors.

What are the use cases of -webkit-touch-callout?

-webkit-touch-callout: none is the only declaration most teams ever ship for this property. The rule clears the iOS callout out of the way of a custom long-press interaction so the page can run its own gesture without the system action sheet stealing focus.

• Custom drag-and-drop on iOS: Drag handles built on touchstart and touchmove conflict with the long-press callout. Setting -webkit-touch-callout: none on the handle keeps the gesture clean and the user does not see Open or Copy Link mid-drag.
• Image-protection overlays: Portfolio sites, photo galleries, and stock-image previews use -webkit-touch-callout: none to hide the Save Image option on iOS Safari. Pair it with -webkit-user-select: none and a contextmenu handler to lock copy on desktop too.
• Game canvases and HTML5 boards: Touch-driven game elements rely on rapid touchstart and touchend pairs. The system callout would interrupt the gesture, so the canvas root usually sets -webkit-touch-callout: none on every interactive layer.
• PWAs that mimic native apps: Web apps installed to the iOS home screen aim for a native feel. Suppressing the callout on buttons, tabs, and list items removes the obvious browser cue and brings the interaction closer to a UIKit control.
• Long-press menus you build yourself: Trello-style cards, Slack-style message actions, and chat reactions all attach a custom menu to a long press. The property prevents the iOS action sheet from racing the JavaScript handler that opens the in-app menu.

What are the known issues with -webkit-touch-callout?

-webkit-touch-callout has the smallest cross-browser footprint of any touch CSS rule, and the painful edge cases land on iOS Safari, the magnifier loupe, and the interaction with -webkit-user-select.

• iOS only: The property is a no-op on every desktop engine, every Android Chromium build, and every Gecko release. Sites that ship the rule for cross-browser image protection are getting iOS coverage only and need a contextmenu event handler for the rest.
• Magnifier loupe still fires: Setting -webkit-touch-callout: none hides the action sheet, but iOS Safari still shows the magnifier loupe on a long press over text. To suppress that too, set -webkit-user-select: none on the same element.
• Image saving still possible by screenshot: The rule blocks the Save Image entry, but a user can still screenshot the page or open the image directly in a USB-tethered DevTools session. Treat the property as a UX hint, not a copy-protection mechanism.
• Inheritance gotcha on links: Anchor elements inside a parent that sets -webkit-touch-callout: none still expose the callout if the link is a separate touch target with its own long-press handler. Apply the rule on the anchor itself when in doubt.
• Cross-origin iframe limits: A cross-origin iframe inside an iOS Safari page renders with its own touch model. Setting the property on the parent does not propagate into the frame, and the frame's stylesheet has to set its own -webkit-touch-callout: none.
• Lint rules flag it: Stylelint and the Chrome DevTools Issues panel mark -webkit-touch-callout as a non-standard property. Build pipelines that strip vendor prefixes can drop it from the production bundle, so disable that rule for the WebKit prefix or keep the declaration in a hand-managed stylesheet.

In my experience, the safest pattern is to scope -webkit-touch-callout: none to the exact touch target that needs it, pair it with -webkit-user-select: none and touch-action: none, and back the gesture with a contextmenu event listener. The CSS handles iOS Safari, the event listener covers every other browser, and the audit log stays clean when a linter flags the WebKit prefix.

Citations

All -webkit-touch-callout version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs, -webkit-touch-callout: developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout
• MDN Web Docs, WebKit CSS extensions: developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_extensions
• MDN browser-compat-data, -webkit-touch-callout JSON: github.com/mdn/browser-compat-data/blob/main/css/properties/-webkit-touch-callout.json
• MDN Web Docs, user-select: developer.mozilla.org/en-US/docs/Web/CSS/user-select
• MDN Web Docs, touch-action: developer.mozilla.org/en-US/docs/Web/CSS/touch-action
• MDN Web Docs, contextmenu event: developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event
• Apple Developer, Safari CSS Reference: developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html
• Apple Developer, Configuring web applications: developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
• WebKit Open Source Project: webkit.org
• Wikipedia, WebKit: en.wikipedia.org/wiki/WebKit
• Wikipedia, Safari (web browser): en.wikipedia.org/wiki/Safari_(web_browser)