Scroll to Text Fragment: Browser Support, Syntax

What is Scroll to Text Fragment?

Scroll to Text Fragment is a Web Incubator Community Group (WICG) URL fragment directive that scrolls a page to and highlights a text snippet specified after #:~:text= in the URL. The browser strips the directive from document.URL after parsing, so the target page cannot read it.

Which browsers does Scroll to Text Fragment support?

Scroll to Text Fragment ships in every modern engine, with Chromium browsers leading the rollout, Safari following on macOS and iOS, and Firefox arriving last. Internet Explorer and Opera Mini never implemented the directive.

What is the syntax of Scroll to Text Fragment?

The directive sits after the regular URL fragment, separated by the :~: delimiter, and the value follows the text= keyword. The browser strips :~: and everything after it from the visible URL once the page loads.

• Single phrase: #:~:text=hello%20world targets the first match of the phrase hello world on the page.
• Range match: #:~:text=start%20here,end%20there highlights every character from the start phrase to the end phrase, including the phrases themselves.
• Prefix and suffix: #:~:text=before-,target,-after lets you disambiguate repeated phrases by anchoring the match to the surrounding context. The prefix and suffix are not highlighted.
• Multiple directives: Chain ranges with an ampersand, for example #:~:text=first&text=second, to highlight several phrases on the same page.
• Reserved character encoding: Encode comma as %2C, hyphen as %2D, ampersand as %26, and space as %20 inside the directive value, otherwise the parser splits on those characters.
• Combined with id fragment: #section-2:~:text=hello tells the browser to find the text inside the section-2 anchor first, then highlight the match.

How do you create a Scroll to Text Fragment link?

Modern browsers ship a built-in command for this; older browsers need an extension or a small script. Either path produces a regular URL you can share like any other link.

• Select the target text: Highlight the phrase you want the link to scroll to. Keep the selection inside one block-level element so the matcher can find it.
• Use the native context menu: In Chrome 90+, Edge 90+, and Safari 18.2+, right-click the selection and choose Copy Link to Highlight. The browser builds the #:~:text= URL and copies it to the clipboard.
• Install an extension on Firefox: Firefox does not yet generate links from the menu, so install the Text Fragment add-on from addons.mozilla.org and use its toolbar button on the highlighted selection.
• Run a bookmarklet on any browser: If extensions are blocked, paste the JavaScript snippet below into the DevTools console after selecting text, and it logs a ready-to-share URL.
• Verify the link in a fresh tab: Paste the copied URL into a new tab. The browser should scroll to the phrase and highlight it. If the page jumps to the top, re-check the encoding and confirm the phrase still exists on the live HTML.

// Build a Scroll to Text Fragment URL from the current text selection.
// Paste this into the DevTools console on any page after selecting some text.

function buildTextFragmentUrl() {
    const selection = window.getSelection();
    if (!selection || selection.isCollapsed) {
        console.log("Select some text on the page first, then run again.");
        return null;
    }

    const phrase = selection.toString().trim();
    const encoded = encodeURIComponent(phrase)
        .replace(/-/g, "%2D")
        .replace(/,/g, "%2C")
        .replace(/&/g, "%26");

    const url = window.location.origin + window.location.pathname + "#:~:text=" + encoded;
    console.log("Open this URL in a new tab to jump back to the highlighted text:");
    console.log(url);
    return url;
}

buildTextFragmentUrl();

What are the security restrictions of Scroll to Text Fragment?

The directive carries side-channel risk because the highlight signal can leak information about page content to the referring origin. The spec and every shipping engine apply four hard restrictions to keep that risk bounded.

• User-initiated navigation only: The browser activates the text directive only on a top-level navigation that started from a click, a tap, or an address-bar entry. Scripted location.assign and history.pushState calls do not trigger the highlight.
• Main frame only: Iframes, AMP frames, and ad slots ignore #:~:text=. The directive is dropped before the embedded document parses the URL, so a sub-frame cannot deep-link into its host.
• Cross-origin opener isolation: A cross-origin link must use rel="noopener" on the anchor or pass noopener to window.open. Without it, Chrome and Edge silently strip the directive to prevent the opener from reading scroll position.
• Stripped from document.URL: The browser hides the :~: portion from JavaScript, so the target page cannot read the fragment, log it, or echo it back to a server through document.URL or window.location.hash.
• Document-Policy opt-out: A site can send Document-Policy: force-load-at-top in its response headers to opt the entire page out of text fragments. The browser then ignores every directive on inbound URLs.

What are the known issues with Scroll to Text Fragment?

The directive is stable on every modern engine, but the matching algorithm and the security boundary still produce predictable failures in production. Most issues trace back to encoding, block-level boundaries, or page mutation after publication.

• Single block boundary: The matched range cannot cross a block-level element. A phrase that spans a paragraph break or a heading falls back to the prefix-only match, and a range across two paragraphs never highlights.
• Stale links after content edits: If the page text changes by even one character, the link no longer matches. Editorial teams that auto-update copy break inbound text fragment links the moment they republish.
• Single-page app navigation: Frameworks that intercept clicks with router-level navigation skip the user-initiated path. The directive then never fires, even though the URL contains it.
• PDFs and non-HTML responses: The directive only applies to HTML documents. PDF viewers, plain text responses, and image responses ignore #:~:text= entirely.
• Encoding traps: Forgetting to escape the comma in a phrase splits the directive into a range, and forgetting to escape the hyphen turns the start phrase into a prefix. Both produce an empty match with no error.
• Highlight color clashes: The default browser highlight color is yellow on Chromium and pink on Safari. Pages with similar background colors render the highlight invisible, and there is no CSS hook to restyle it across engines.

In my experience, the trap that bites teams hardest is shipping text fragment links from a marketing CMS that auto-rewrites apostrophes and dashes to typographic versions on publish, which silently breaks every inbound link the moment the post goes live.

Citations

All Scroll to Text Fragment version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - Text fragments: developer.mozilla.org/en-US/docs/Web/URI/Reference/Fragment/Text_fragments
• WICG URL Fragment Text Directives specification: wicg.github.io/scroll-to-text-fragment
• WICG Scroll to Text Fragment proposal repository: github.com/WICG/scroll-to-text-fragment
• Chrome Platform Status - Scroll to Text Fragment: chromestatus.com/feature/4733392803332096
• Chrome for Developers - Boldly link where no one has linked before: developer.chrome.com/docs/web-platform/text-fragments
• Mozilla Bugzilla 1753933 - Implement Text Fragments: bugzilla.mozilla.org/show_bug.cgi?id=1753933
• Mozilla Firefox 131 release notes: mozilla.org/en-US/firefox/131.0/releasenotes
• WebKit blog - Scroll to text fragment in Safari: webkit.org/blog/13152/webkit-features-in-safari-16-1
• Apple Developer - Safari 18.2 release notes: developer.apple.com/documentation/safari-release-notes/safari-18_2-release-notes
• Microsoft Learn - Microsoft Edge web platform: learn.microsoft.com/en-us/microsoft-edge/web-platform
• Wikipedia - URI fragment: en.wikipedia.org/wiki/URI_fragment
• WHATWG URL Standard: url.spec.whatwg.org