Microsoft Edge 149 web platform release notes (Jun. 2026)

The following are the new web platform features and updates in Microsoft Edge 149, which releases on Jun. 4, 2026.

To stay up-to-date and get the latest web platform features, download a preview channel of Microsoft Edge (Beta, Dev, or Canary); go to Become a Microsoft Edge Insider.

Detailed contents:

• Edge DevTools
• WebView2
• CSS features
  • CSS gap decorations
  • Clip text overflow on user interaction
  • image-rendering: crisp-edges
  • path-length CSS property for SVG elements
  • path(), shape(), rect(), and xywh() in shape-outside
  • Removed border-color: gray from user agent stylesheet for <table>
  • Scope system accent color to installed web apps
  • User-action pseudo-classes top-layer boundary
• Web APIs
  • Disable SVG filters on cross-origin iframes and plugins
  • Intl.Locale variants
  • OpaqueRange for form control text
  • Migrate a PWA to a new origin
  • Distinguish payment handler errors in a payment request
  • Get notified when the scrollBy and scrollTo methods complete
  • Request.isReloadNavigation attribute
  • Service Worker router timing fields in Resource Timing and Navigation Timing APIs
  • autocorrect="off" on Windows touch keyboard
  • Defer clipboard data reads until the MIME type is specified
  • Close WebSocket connections on bfcache entry
• Origin trials

Edge DevTools

See What's new in Microsoft Edge DevTools.

WebView2

See Release notes for the WebView2 SDK.

CSS features

The following new Cascading Style Sheets (CSS) features are included in Microsoft Edge.

CSS gap decorations

Style the gaps in Grid and Flexbox container layouts, similar to column-rule in multiple-column layout. Use gap decorations to visually separate items without resorting to workarounds such as pseudo-elements or extra wrapper elements.

See also:

• A new way to style gaps in CSS
• Multiple-column layout at MDN.

Clip text overflow on user interaction

When a user interacts with text that has text-overflow: ellipsis set (such as during editing or caret navigation), the text temporarily switches from ellipsis to clip (in which the truncation can happen in the middle of a character). This allows the user to see and interact with the hidden overflow content.

This behavior applies to all editable and non-editable elements. Form controls (<textarea>, <input>) already support this behavior.

See also:

• text-overflow at MDN.

image-rendering: crisp-edges

The image-rendering property now supports the crisp-edges value.

Use image-rendering: crisp-edges to scale an image in a way that preserves contrast and edges, without smoothing colors or introducing blur.

See also:

• image-rendering at MDN.

path-length CSS property for SVG elements

Use the new path-length CSS property to set the pathLength attribute value on SVG geometry elements, including:

• <path>
• <circle>
• <rect>
• <line>
• <polyline>
• <polygon>
• <ellipse>

The path-length CSS property allows you to manipulate an SVG's pathLength attribute value via stylesheets, inline styles, and animations.

CSS declarations override the SVG presentation attribute following standard CSS precedence rules. The initial value is none.

See also:

• pathLength at MDN.

path(), shape(), rect(), and xywh() in shape-outside

You can now use the path(), shape(), rect(), and xywh() shape functions in the CSS shape-outside property to define float exclusion shapes.

See also:

• path() CSS function at MDN.
• shape() CSS function at MDN.
• rect() CSS function at MDN.
• xywh() CSS function at MDN.
• float CSS property at MDN.

Removed border-color: gray from user agent stylesheet for <table>

The erroneous border-color: gray rule has been removed from the browser's user agent stylesheet for the <table> element. Table borders now correctly default to currentColor, matching the HTML specification and other browsers.

See also:

• <table> HTML table element at MDN.

Scope system accent color to installed web apps

The accent-color: auto CSS value for form controls now applies the operating system's accent color only within installed web app contexts. On regular web pages, form controls use a browser-default accent color instead.

This change aligns the behavior of accent-color: auto with the AccentColor and AccentColorText CSS system color keywords, which are also scoped to installed web app contexts, to reduce fingerprinting.

See also:

• accent-color at MDN.

User-action pseudo-classes top-layer boundary

The :hover, :active, and :focus-within pseudo-classes now match on parent elements only up to the first top-layer element in the chain of parent elements.

For example, consider this HTML:

<main>
  <div popover>
    <button></button>
  </div>
</main>
<script>document.querySelector('[popover]').showPopover();</script>

When the user hovers over the <button> element, the :hover pseudo-class matches the <button> and the <div popover> elements, but doesn't match the <main> element, because the <div popover> is a top-layer element.

Top-layer elements are visually rendered outside of their parent context, so changing parent styles when a top-layer element is hovered over or activated is undesirable.

See also:

• User Action Pseudo-classes in Selectors Level 4.
• Popover API at MDN.

Web APIs

The following new Web API features are included in Microsoft Edge.

Disable SVG filters on cross-origin iframes and plugins

SVG filters are no longer applied to the following:

• Cross-origin or restricted iframes (such as sandboxed iframes).
• Embedded plugins (such as PDFs).

This prevents potential security issues from cross-origin content being processed through SVG filter effects.

See also:

• SVG filters at MDN.
• <iframe> HTML inline frame element at MDN.

Intl.Locale variants

The Intl.Locale object now exposes a variants property. You can also now pass a variants string in the options of the Intl.Locale constructor.

The variants of a locale represent additional language preferences that are not covered by the language, region, and script fields of a language ID.

See also:

• Intl.Locale at MDN.

OpaqueRange for form control text

Use OpaqueRange to represent a live span of text within a form control's value, such as a <textarea> or text-based <input>.

OpaqueRange enables the following for inline suggestions, highlights, and anchored popovers:

• Operations such as getBoundingClientRect() and getClientRects().
• Integration with the CSS Custom Highlight API.

OpaqueRange preserves encapsulation by exposing only value offsets, and returns null for startContainer and endContainer.

See also:

• OpaqueRange at MicrosoftEdge/Demos.
• Try the OpaqueRange API. Stop using mirror divs to measure text positions in inputs! at YouTube.

Migrate a PWA to a new origin

You can now seamlessly migrate an installed Progressive Web App (PWA) to a new, same-site origin, preserving user trust and permissions.

When a user installs a PWA, its identity is bound to its web origin (for example, app.example.com). Previously, changing the origin forced users to manually uninstall and reinstall the app. This feature eliminates that disruption.

See also:

• Progressive web apps at MDN.

Distinguish payment handler errors in a payment request

A payment handler that's accessed via the Payment Request API can now return distinct errors for "user cancelled" versus "internal payment app error".

Use this distinction to build better flows for your users. For example, when an internal error occurs, retry or fall back to a different payment method, while properly stopping the flow if the user cancels.

• If the promise that's passed to PaymentRequestEvent.respondWith is rejected with an OperationError, your PaymentRequest.show() promise receives an OperationError.
• If the promise that's passed to PaymentRequestEvent.respondWith is rejected with a value other than OperationError, your PaymentRequest.show() promise receives an AbortError (user cancel).

See also:

• Payment Request API at MDN.

Get notified when the scrollBy and scrollTo methods complete

Programmatic scrolling methods, such as scrollBy and scrollTo, now return a Promise object that resolves when the scroll completes. Use this promise to run code after a smooth-scroll finishes, without relying on a timer or scroll-event polling.

See also:

• Window: scrollBy() method at MDN.
• Window: scrollTo() method at MDN.

Request.isReloadNavigation attribute

The isReloadNavigation attribute is now available on the Fetch API's Request interface. This attribute indicates whether the navigation request was initiated as a user-triggered reload, such as when the user clicks the Refresh button, or when the location.reload() or history.go(0) method runs.

The isReloadNavigation attribute is a read-only boolean.

Use this attribute in your Service Worker's FetchEvent handler to implement caching strategies, such as bypassing the cache or enforcing a network-first strategy specifically during a reload.

See also:

• Request.isReloadNavigation in the Fetch Standard.

Service Worker router timing fields in Resource Timing and Navigation Timing APIs

The workerMatchedRouterSource and workerFinalRouterSource attributes are now available on the Resource Timing and Navigation Timing APIs.

• Use the workerMatchedRouterSource attribute to identify which service worker static router rule was matched.

• Use the workerFinalRouterSource attribute to identify the final source that was used for the request.

See also:

• Service Worker API at MDN.
• Use the Service Worker Static Routing API to bypass the service worker for specific paths.

autocorrect="off" on Windows touch keyboard

The autocorrect attribute now works correctly on the Windows touch keyboard. Previously, the touch keyboard ignored the autocorrect="off" attribute value, and always autocorrected words.

To prevent the touch keyboard from replacing typed text, set the autocorrect="off" attribute value on:

• An <input> element.
• A <textarea> element.
• Any element that has the contenteditable attribute set.

See also:

• autocorrect at MDN.

Defer clipboard data reads until the MIME type is specified

The Async Clipboard API now defers reading clipboard data from the operating system until you call getType(). When you call navigator.clipboard.read(), the browser returns an array of ClipboardItem objects, each with their available MIME types, but without the underlying data. The actual data is read only when you request a specific format.

const items = await navigator.clipboard.read(); // No data is read yet.
const text = await items[0].getType('text/plain'); // Only the 'text/plain' data is read here.

This reduces CPU usage, and improves the perceived responsiveness of the API call.

See also:

• Clipboard API at MDN.

Close WebSocket connections on bfcache entry

An open WebSocket connection is now closed when a page enters the back/forward cache (bfcache), instead of preventing the page from being cached.

Previously, a page that had an active WebSocket connection couldn't be stored in the bfcache. With this change, more pages benefit from instant backward and forward navigation.

When your page enters the bfcache, the page receives a close event on each affected WebSocket. Listen for the pageshow event, and then reconnect when event.persisted is true.

See also:

• WebSocket at MDN.
• Working with the bfcache at MDN.

Origin trials

The following are origin trials for new experimental APIs that are available in Microsoft Edge.

Origin trials let you try experimental APIs on your own live website for a limited time. To learn more about origin trials, see Use origin trials in Microsoft Edge.

For the full list of available origin trials, see Microsoft Edge Origin Trials.