This release includes WebKit changes between: 283043@main…283691@main.

Accessibility

Resolved Issues

• Fixed VoiceOver focus to activate PDF form fields when it lands on them. (283281@main) (134522935)

CSS

New Features

• Added support for cross-document view-transitions. (283320@main) (133994557)
• Added preview support for line-clamp. (283233@main) (135369594)

Resolved Issues

• Fixed text-decoration-thickness to work in buttons. (283212@main) (118320835)
• Fixed skipping view transitions on hidden pages. (283084@main) (125017653)
• Fixed contrast between ButtonFace and ButtonText system colors in dark mode. (283284@main) (131996608)

Forms

Resolved Issues

• Fixed HTMLSelectElement.prototype.add with optgroup elements. (283080@main) (120553757)

JavaScript

Resolved Issues

• Fixed: Improved the TypeError message when a WeakMap constructor takes an iterable that yields invalid entry. (283199@main) (135333331)
• Fixed incorrect SyntaxError when destructuring let. (283217@main) (135353378)

Deprecations

• Removed obsoleted methods for Temporal.PlainTime and Temporal.PlainDateTime to align with specification changes. (283315@main) (135509670)

Service Workers

Resolved Issues

• Fixed Service Workers to support focusing a page that is being loaded. (283263@main) (135337772)

Web API

New Features

• Added support for the Cookie Store API. (283654@main) (135969444)

Resolved Issues

• Fixed scrollIntoView(...) for SVG elements. (283157@main) (135265918)

Web Driver

Resolved Issues

• Fixed Web Driver to use pointer origin rather than viewport origin for state location resolution. (283186@main) (128668986)

Web Extensions

New Features

• Added support for icon_variants in Web Extensions. (283118@main, 283219@main) (134885372)

Resolved Issues

• Fixed blob URL downloads failing to trigger from an extension. (283220@main) (78929424)
• Fixed including the extension’s icon in the commands menu item and prevented customization using System Settings. (283229@main) (135360504)

Web Inspector

Resolved Issues

• Fixed an issue where multi-line content in the Console prompt was not scrollable. (283412@main) (131756916)

Interop 2025 is just around the corner, and we want your brilliant ideas to make the web platform even more awesome. Whether you’re a seasoned pro or a newcomer with fresh perspectives, we want to hear from you!

Key Dates to Remember

• Proposal Submission Opens: September 17, 2024
• Submission Deadline: October 9th, 2024

Don’t miss this opportunity to influence the direction of web standards and browser implementations!

I’m new to the Interop project, what is it about?

The Interop Project is a collaborative initiative among major browser vendors to improve cross-browser compatibility and interoperability on the web platform. The project focuses development efforts on improving consistency across browsers for key web features and APIs ensuring they are uniformly implemented using a shared test suite called Web Platform Tests (WPT).

This coordinated approach aims to reduce developer frustration, enable new web capabilities, improve user experiences, and accelerate the implementation of web standards.

WebKit has made significant strides in improving web interoperability through its participation in Interop 2024. Some notable areas of improvement include CSS nesting, the popover attribute in HTML, scrollbar styling, and text directionality. Features you love in WebKit, like relative color syntax and font-size-adjust, have landed in all browsers thanks to Interop 2024. Our work driving the Accessibility investigation in 2023 led to tests that are now included in Interop 2024, improving web accessibility across all browsers. And there’s much more. These advancements not only make web development more streamlined but also contribute to a more unified and reliable web experience for users across different browsers and devices.

What Makes a Great Proposal?

We’re looking for proposals that address real-world interoperability challenges. The best submissions are typically:

• Specific: Identify a specific interoperability issue.
• Impactful: Provide clear use cases and examples, especially from your own experience.
• Tested: Interop focus areas are scored by the pass rate of web platform tests, this means proposals need good tests to be considered.
• Stable: Interop is about improving browser compatibility for stable, well-understood web standards.
• Valuable: Developers and/or users will benefit from improved interoperability. These are some signals to consider including in your proposal.

Ready to dive in? Check out this handy proposal template and submission guide to get started. If you aren’t sure if your proposal meets all of these guidelines, submit it anyway and it will be evaluated by the Interop team.

Resources at Your Fingertips

• Interop Dashboard: See how browsers are performing on current interop focus areas
• Interop Project README: Get the full scoop on the Interop project

Join the Interop Party!

Interop 2025 is all about collaboration. By participating, you’re joining a global community of developers, browser vendors, and standards bodies working together to make the web more consistent and reliable across platforms.

Get ready to share your ideas and insights as we make the web even more amazing together. We can’t wait to see your proposals.

Remember, the future of the web is in your hands. Let’s build it together!

New in Safari 18

Distraction Control

Distraction Control lets you hide distracting items as you browse the web, such as sign-in banners, cookie preference popups, newsletter signup overlays, and more, in Safari for iOS 18, iPadOS 18 and macOS Sequoia.

Activate Distraction Control by tapping the Page Menu , and choosing “Hide Distracting Items”. Then tap the element you want to disappear, and watch it fade away. You can easily un-hide items at any time by returning to the Page Menu, and tapping “Show Hidden Items”.

Viewer

Whenever you are on a web page with a prominent video element, you can click on “Video Viewer” in the Page Menu . The video will enlarge to fill the whole window. If you switch tabs, close the window, or occlude the web page with another window, the video enters picture-in-picture.

We always recommend using semantic HTML when creating a website, including <video>,<main>, <article> and other elements that describe content. Doing so helps ensure both Safari Reader and Safari Viewer work best for the users of your website.

iPhone Mirroring and remote inspection

With iPhone Mirroring on macOS Sequoia, you can use your iPhone from your Mac. Combine it with remote inspection from Safari, and now it’s easier than ever to test and debug websites on iOS using Web Inspector.

Get set up for remote inspection by first ensuring you have Safari’s developer tools enabled on your Mac (if you can see the Develop menu in Safari, you’ve already done this step). Next, enable Web Inspector on your iPhone at Settings > Apps > Safari > Advanced > Web Inspector. Then, you’ll need to connect the device to your Mac using a cable to grant permission. Once plugged in, your device will appear in the Develop menu in Safari. Finally, to enable wireless debugging, go to Safari on macOS > Develop > [your device] > Connect via Network.

Now you can use Web Inspector to wirelessly debug websites running on iPhone anytime. And with iPhone Mirroring, you don’t even have to pull out your phone. Everything is on your Mac’s screen.

Learn more about remote inspection by reading Inspecting iOS and iPadOS, or by watching Rediscover Safari developer features from WWDC. Learn more about iPhone Mirroring¹ on apple.com.

Web apps for Mac

Last year, we added support for web apps in macOS Sonoma. You can add any website to your dock — whether or not it was built with a Manifest file, Service Worker, or other technology to customize the web app experience. Go to the site in Safari, then File > Add to Dock… where you can customize the icon, change the name, and even adjust the URL. Then, just click on the web app icon in your Dock, and the website will open as a stand-alone app.

This year brings two improvements to web apps on Mac.

Opening links

macOS Sequoia adds support for opening links directly in web apps. Now, when a user clicks a link, if it matches the scope of a web app, that link will open in the web app instead of their default web browser. For example, imagine you have added MDN Web Docs to your Dock. Then a colleague sends you a link to an MDN page in Messages, Mail, Slack, Discord, IRC, or any non-browser application on your Mac. Now when you click on that link, it will open in the MDN Web Docs web app instead of your default browser.

Clicking a link within a browser will maintain the current behavior. This feature only affects links opened elsewhere. (When a user is in Safari, clicking on a link that matches the scope of a web app that is added to Dock, they will see an “Open in web app” banner, unless they have previously dismissed the banner.)

By default, this behavior applies when the link matches the host of the web page used to create the web app. As a developer, you can refine this experience by defining the range of URLs that should open in the web app with the scope member in the web app manifest.

Extension support

Now users can personalize web apps on Mac with Safari Web Extensions and Content Blockers. Navigate to the web app’s Settings menu to access all the installed Content Blockers and Web Extensions. Any enabled in Safari will be on by default in the web app. Each web app is uniquely customizable, just like Safari profiles.

CSS

View Transitions

WebKit added support for the View Transitions API in Safari 18. It provides an optimized browser API to animate elements from one state to another. Safari supports the CSS View Transitions Module Level 1 specification that adds new CSS properties and pseudo-elements for defining transition animations, along with a new browser API to start transition animations and react to different transition states. It works by capturing the current (old) state of the page and applying an animated transition to the new state. By default, the browser applies a cross-fade between the states.

Call the document.startViewTransition() method to initiate the capture. You can pass a callback function as the first argument to make DOM state changes between the old and new captures. The method returns a ViewTransition object which contains promises that can be used to track when the view transition starts or ends.

Once the states are captured, a pseudo-element tree is built which can be targeted with CSS, allowing you to modify the CSS animations used for the transitions. The animations out of the old page state and into the new page state can be modified via the ::view-transition-new(*) and ::view-transition-old(*) selectors. You can also ask the browser to independently track state changes for a specific element by naming it with the CSS view-transition-name property. You can then use the pseudo-elements to customize animations for it.

.page-view {
    view-transition-name: page-view;
}
::view-transition-old(page-view) {
    animation: 500ms ease-in-out transition-out-animation;
}
::view-transition-new(page-view) {
    animation: 500ms ease-in-out transition-in-animation;
}

The :active-view-transition pseudo-class becomes active on the root element when a view transition is running.

The example below demonstrates state management with tabbed navigation. Each tab view has a custom transition animation out and a subtly different animation in, while the tabs themselves rely on the default page transition.

Style Queries

WebKit for Safari 18.0 adds support for Style Queries when testing CSS Custom Properties. Similar to how developers can use Sass mixins, Style Queries can be used to define a set of reusable styles that get applied as a group.

Here, if the --background custom property is set to black, then certain styles will be applied — in this case to make the headline and paragraph text color white.

@container style(--background: black) {
  h2, h3, p {
    color: white;
  }
}

Don’t forget to pay attention the HTML structure. By default, Style Queries reference the styles on the direct parent element. You can create a different reference through the use of Container Query names.

currentcolor and system color keywords in Relative Color Syntax

Support for Relative Color Syntax shipped in Safari 16.4. It lets you define colors in a more dynamic fashion, creating a new color from an existing color. The value lch(from var(--color) calc(L / 2) C H) for instance uses the lch color space to take the variable --color and calculate a new color that’s half its lightness, calc(L / 2).

Now in Safari 18.0, the first browser to ship support, you can reference the currentcolor or a system color keyword as you define the new color. For example, this code will set the background color to be the same color as the text color, only 4 times lighter, as calculated in the oklch color space.

section { background: oklch(from currentcolor calc(L * 4) C H); }

Being able to reference system color keywords opens up another world of options. System colors are like variables that represent the default colors established by the OS, browser, or user — defaults that change depending on whether the system is set to light mode, dark mode, high contrast mode, etc. For example, canvas represents the current default background color of the HTML page, while fieldtext matches the color of text inside form fields. Find the full list of system colors in CSS Color level 4.

Relative Color Syntax lets you define dynamic connections between colors in your CSS, lessening the need to control color through variables in a tightly-regimented design system. Learn more about Relative Color Syntax by watching this portion of What’s new in CSS from WWDC23.

Translucent accent colors

Partially transparent colors in accent-color are now blended on top of the Canvas system color to match the latest updates to the web standard. This means that any of the many ways to define colors using an alpha channel will now work as expected when used to define an accent color for a form control.

.form-control {
    accent-color: rgba(0,0,0,0.6);
}

Animating display

WebKit for Safari 18.0 adds support for transition animation of the display property.

Many developers are excited to use @starting-style along with transition-behavior and display: none interpolation. WebKit for Safari 17.4 added general support for transition-behavior, including transition-behavior: allow-discrete. WebKit for Safari 17.5 added support for @starting-style, letting you define starting values for transitioning an element as it’s created (or re-created). Now in WebKit for Safari 18.0, you can use these features together to transition the display property.

Backdrop Filter

Originally shipped in Safari 9.0, backdrop filter provides a way to apply graphics effects to the content behind a particular element. You can apply backdrop-filter to a headline, for example, and everything behind the headline will be blurred, or have decreased saturation, or increased contrast. Any of the filter functions from SVG can be used — blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), and sepia().

For many years, backdrop filter only worked in Safari. It was available when you prefixed the property with -webkit-backdrop-filter. Now, starting in Safari 18.0, you don’t need the prefix. We also improved our implementation, fixing bugs and boosting interoperability.

This demo shows eight different filters and what you might do with each one alone. You can, of course, combine filters to create even more interesting results. With backdrop filter supported in Safari since 2015, Edge since 2018, Chrome since 2019, Samsung Internet since 2020, and Firefox since 2022, this is a great time to consider the kind of graphic design possibilities it enables.

Content visibility

WebKit for Safari 18.0 adds support for content-visibility. This property controls whether or not an element renders its contents in a fashion that’s useful for making performance optimizations. It lets you communicate to the browser that certain portions of the page will likely be initially offscreen, and suggest they be omitted from layout and rendering. This can make the page load faster.

And more

WebKit for Safari 18.0 adds parsing support for the custom value for theprefers-contrast media query. (It does not return “true” on Apple platforms, since there is no forced-colors mode in iOS, iPadOS, macOS or visionOS.)

Spatial Web

WebXR

Safari 18.0 for visionOS 2 adds support for immersive-vr sessions with WebXR. Now you can create fully immersive experiences for people using Apple Vision Pro and deliver them through the web. WebXR scenes are displayed using hardware-accelerated graphics driven by WebGL.

Safari for visionOS 2 supports the new WebXR transient-pointer input mode. It lets you make the most of natural input on visionOS, and allow your users to interact with a look and a pinch.

If you want to animate a 3D model of the user’s hands, Safari for visionOS 2 also includes support for WebXR hand tracking. To ensure privacy, permission to allow hand tracking will be requested from users at the start of their WebXR session.

Learn all about WebXR on visionOS 2 by watching Build immersive web experiences with WebXR from WWDC. Learn more about transient-pointer input mode by reading Introducing natural input for WebXR in Apple Vision Pro. And learn all about how to use Safari’s developer tools on Mac to inspect and debug in Apple Vision Pro by reading Try out your website in the spatial web.

Spatial photos and panoramas

One of the amazing experiences you can have on Apple Vision Pro is looking at spatial photos and panoramas. The web is a great place to share these photos with others.

When you open the Photos app in visionOS, you see your library of photos. When you tap an image, it appears alone in a floating frame in front of you. Spatial photos appear at just the right height and viewing angle to make it feel like you’ve gone back to a moment in time. A second tap of the UI breaks a spatial photo out of its frame, becoming even more immersive. Similarly, a panorama floats in a frame on first tap. Then on second tap of the UI, it expands to wrap all around you, creating a fully immersive experience.

Now in Safari 18.0 for visionOS 2, you can use the JavaScript Fullscreen API to create a similar experience on the web. You can embed the photo in a web page, and provide the ability to tap. The photo will pop into a floating frame as the Safari window disappears. Then when the user taps on the spatial photo or panorama UI that visionOS provides, the photo will further expand to create a more immersive experience. When they exit the image, the Safari window will return.

Let’s walk through how to support experiencing a spatial photo or panorama on the web using Fullscreen API. First, include the image on your web page using any of the techniques used for years. Here, we can embed a flattened panoramic photo into the web page using simple HTML.

<img src="panorama.jpeg" class="go-fullscreen" alt="[description]">

Then using JavaScript, we’ll trigger .requestFullscreen() on tap. Perhaps like this.

document.querySelectorAll('.go-fullscreen').forEach(element => {
    element.addEventListener('click', async () => {
        await element.requestFullscreen();
    });
});

You could, of course, create your own UI for the user to tap, rather than making the entire photo the tap target.

Spatial images work just the same, although it’s likely we want to provide fallbacks for browsers that do not support HEIC files. We can do so with the picture element.

<picture>
    <source srcset="spatial.heic" type="image/heic">
    <source srcset="fallback.avif" type="image/avif">
    <img src="fallback.jpg" class="go-fullscreen" alt="write descriptive text here" >
</picture>

Spatial images are stereoscopic, with both a left and right channel. In Safari, when the image is embedded in the web page, the browser will show the left channel. And there’s no need to worry about providing a fallback of any sort for Safari on macOS, iOS, or iPadOS — the stereoscopic HEIC file works great.

This technique will also cause images to go fullscreen in any browser that supports Fullscreen API. Learn more about adding panorama and spatial photos to your websites by watching Optimize for the spatial web from WWDC.

Shaping interaction regions on visionOS

As a web developer, you’re very familiar with how link styling works on the web. For decades you’ve been able to use CSS to style text-decoration, color and more for :link, :hover, :active, and :visited states. You’ve also been able to adjust the size of the invisible tap target through use of padding.

Apple Vision Pro adds a new dimension to how links work — tap targets are visible on visionOS. Anytime a user looks at an interactive element, it’s highlighted to let them know that it can be tapped. And you as a designer or developer can intentionally design how an interaction region looks. You may want to add padding, for instance, or even a rounded corner to the otherwise invisible box.

Now in Safari in visionOS 2 , when you use CSS clip-path to change the shape of tappable area of a link, the visible interaction region will change shape as well. Interactive UI elements built with SVG and cursor: pointer will also be highlighted with the proper shape. Learn more by watching Optimize for the spatial web from WWDC.

Video on visionOS

Safari for visionOS 2 adds support for docking fullscreen videos into the current Environment. Anytime a user is watching a video fullscreen, they can tap the mountain symbol to enter an immersive experience. Turning the Digital Crown adjusts the immersion.

HTML

Writing Suggestions

At last year’s WWDC, Apple unveiled inline predictive text on iOS, iPadOS, macOS and more. It helps users input text faster by predicting what they might be typing and finishing the word, phrase or even a whole sentence when the user taps the space bar. Now, WebKit for Safari 18.0 on iOS, iPadOS, visionOS, macOS Sequoia and macOS Sonoma brings inline predictive text to the web.

While inline predictive text makes for a fantastic, personalized user experience, there might be specific situations on the web where it’s better to not have predictions. WebKit for Safari 18.0 on iOS, iPadOS, visionOS, macOS Sequoia and macOS Sonoma gives web developers the opportunity to disable inline predictions through the writingsuggestions attribute. By default, writing suggestions is set to true. You can turn off the capability by including the writingsuggestions="false" attribute on any type of text input field.

Switch

WebKit for Safari on iOS 18 adds haptic feedback for <input type=checkbox switch>. This means, now when a user taps a switch control on iPhone, a single tap is felt — just like how toggling a switch feels in Settings app on iOS. Try this demo to see what it’s like.

Date and time inputs

WebKit for Safari 18.0 on macOS improves accessibility support for date and time input field types. Now <input type="date">, <input type="datetime-local">, and <input type="time"> elements work properly with VoiceOver.

ARIA

Usually elements have the labels they need, but sometimes there is no text label for a particular button or UI. In this situation, ARIA can be used to provide an accessible label. The aria-label attribute provides names of labels while aria-roledescription provides the description for the role of an element.

On very rare occasions, you may need to override aria-label or aria-roledescription to provide different names or descriptions specifically for braille. The aria-braillelabel and aria-brailleroledescription attributes provide such an ability. They exist to solve very specific needs, including educational contexts where the site needs to render the specific braille table dot pattern. If you do use braille-related ARIA attributes, be sure to test them using a braille reader. If in doubt, relying on the accessible name from content or aria-label / aria-roledescription is almost always the better user experience. WebKit has supported these ARIA attributes for years.

Now, WebKit for Safari 18.0 adds support for the ariaBrailleLabel and ariaBrailleRoleDescription element reflection properties. These make it possible to get and set the aria-braillelabel and aria-brailleroledescription ARIA attributes on DOM elements directly via JavaScript APIs, rather than by using setAttribute and getAttribute.

JavaScript

WebKit for Safari 18.0 adds support for Unicode 15.1.0 characters in RegExp. Unicode 15.1 added 627 characters, bringing the total of characters to 149,813. Now, these new characters can be used in regular expressions.

WebKit for Safari 18.0 also adds support for the v flag with RegExp.prototype[Symbol.matchAll]. providing more powerful ways to match Unicode characters, as specified in the ECMAScript 2024 standard.

For example, you can now specify to only match on Latin characters, while avoiding matching on Cyrillic script characters.

const regex = /\p{sc=Latin}/v;
console.log(regex.test('A')); // true, 'A' is a Latin script character
console.log(regex.test('А')); // false, 'А' is a Cyrillic script character

Or split a string matching on Emojis.

"a 🥰 b 🥰".split(/[\p{Emoji}--\p{ASCII}]/v)// ["a ", " b ", ""]

Web API

WebKit for Safari 18.0 adds support for URL.parse(), a way to parse URLs which returns null rather than an exception when parsing fails.

// Before
let url = null;
try {
  url = new URL(input, base);
} catch(e) { }

// Now
const url = URL.parse(input, base);

WebKit for Safari 18.0 expands Declarative Shadow tree support by adding the shadowRootDelegatesFocus and shadowRootClonable IDL attributes to the <template> element. It also adds the shadowRootSerializable attribute and shadowRootSerializable IDL attribute to the <template> element, enabling those using Declarative Shadow roots to opt into making them serializable. Serializing can be done through the new getHTML() method that has been added at the same time.

WebKit for Safari 18.0 adds support for PopStateEvent’s hasUAVisualTransition, indicating whether the user agent has a visual transition in place for the fragment navigation.

WebKit for Safari 18.0 adds support for subresource integrity in imported module scripts, which gives cryptographic assurances about the integrity of contents of externally-hosted module scripts.

WebKit for Safari 18.0 adds support for the bytes() method to the Request, Response, Blob, and PushMessageData objects. This replaces the need for web developers to call arrayBuffer(), which can be difficult to use, and wraps the result in a Uint8Array . Calling bytes() is now the recommended way going forward when you need to access the underlying bytes of the data these objects represent.

WebKit for Safari 18.0 adds support for feature detecting text fragments by exposing document.fragmentDirective. Note that the returned object (a FragmentDirective) doesn’t provide any functionality, but it’s helpful if you need to know if Fragment Directives are supported by the browser.

Canvas

WebKit for Safari 18.0 adds support for the willReadFrequently context attribute for the getContext() method. It indicates whether or not a lot of read-back operations are planned. It forces the use of a software accelerated 2D or offscreen canvas, instead of hardware accelerated. This can improve performance when calling getImageData() frequently.

WebKit for Safari 18.0 extends 2D canvas support for currentcolor. It can now be used inside color-mix() or Relative Color Syntax. Here currentcolor will default to the computed color property value on the canvas element.

Managed Media Source

WebKit for Safari 18.0 adds Workers support for both Managed Media Source (MMS) and Media Source Extensions (MSE). This can be especially helpful on complex websites that want to ensure continuous and smooth video playback even when other site activity (such as live commenting) causes a very busy main thread. You can see the performance difference in this demo.

WebRTC

WebKit for Safari 18.0 adds support for the WebRTC HEVC RFC 7789 RTP Payload Format. Previously, the WebRTC HEVC used generic packetization instead of RFC 7789 packetization. This payload format provides a new option for improving videoconferencing, video streaming, and delivering high-bitrate movies and TV shows.

WebKit for Safari 18.0 adds support for MediaStreamTrack processing in a dedicated worker. And it adds support for missing WebRTC stats.

HTTPS

WebKit for Safari 18.0 adds support for secure HTTPS for all images, video, and audio by upgrading passive subresource requests in mixed content settings. This means that if some files for a website are served using HTTPS and some are served using HTTP (known as “mixed content”), all images and media will now be auto-upgraded to HTTPS, in adherence with Mixed Content Level 2.

WebGL

WebKit for Safari 18.0 adds support for six new WebGL extensions:

• EXT_texture_mirror_clamp_to_edge
• WEBGL_render_shared_exponent
• WEBGL_stencil_texturing
• EXT_render_snorm
• OES_sample_variables
• OES_shader_multisample_interpolation

Web Inspector

WebKit for Safari 18.0 adds support for fuzzy search code completion in the Web Inspector’s CSS source editor.

Passkeys

Two years ago at WWDC22, we announced support for passkeys — a groundbreaking industry-standard way to login to websites and app services. Passkeys provide people with an extremely easy user experience, while delivering a profound increase in security. To learn more, watch Meet Passkeys or read Supporting passkeys.

WebKit for Safari 18.0 adds support for three new features as we continue to improve passkeys. First, Safari 18.0 adds support for using mediation=conditional for web authentication credential creation. This allows websites to automatically upgrade existing password-based accounts to use passkeys. Learn more by watching Streamline sign-in with passkey upgrades and credential managers from WWDC.

Second, WebKit for Safari 18.0 adds support for using passkeys across related origins. This lets websites use the same passkey across a limited number of domains which share a credential backend.

And third, WebKit for Safari 18.0 adds support for the WebAuthn prf extension. It allows for retrieving a symmetric key from a passkey to use for the encryption of user data.

Safari Extensions

Safari 18.0 also adds support for Mobile Device Management of extension enabled state, private browsing state, and website access on managed devices. This means schools and businesses that manage iOS, iPadOS, or macOS devices can now include the configuration of Safari App Extensions, Content Blockers, and Web Extensions in their management.

Apple Pay

WebKit for Safari 18.0 adds support for funds transfer via Apple Pay.

Deprecations

While it’s rare to deprecate older technology from the web, there are occasions when it makes sense. We’ve been busy removing -webkit prefixed properties that were never standardized, aging media formats that were never supported in other browsers, and more. This helps align browser engines, improve interoperability, and prevent compatibility problems by reducing the possibility that a website depends on something that’s not a web standard.

Canvas

WebKit for Safari 18.0 removes support for OffscreenCanvasRenderingContext2D’s commit() method.

CSS

WebKit for Safari 18.0 deprecates support for a number of rarely used -webkit prefixed CSS pseudo-classes and properties — and even one -khtml prefixed property.

• -webkit-alt and alt properties
• :-webkit-animating-full-screen-transition pseudo-class
• :-webkit-full-screen-ancestor pseudo-class
• :-webkit-full-screen-controls-hidden pseudo-class
• :-webkit-full-page-media pseudo-class
• :-webkit-full-screen-document pseudo-class
• :-khtml-drag pseudo-class

WebKit for Safari 18.0 also deprecates support for the resize: auto rule. Support for the resize property remains, just as it’s been since Safari 4. The values Safari continues to support include: none, both, horizontal, vertical, block, inline, plus the global values. Early versions of CSS Basic User Interface Module Level 3 defined auto, but it was later written out of the web standard.

WebKit for Safari 18.0 also deprecates support for non-standardize WEBKIT_KEYFRAMES_RULE and WEBKIT_KEYFRAME_RULE API in CSSRule.

Images

WebKit for Safari 18.0 removes support for the JPEG2000 image format. Safari was the only browser to ever provide support.

If you’ve been serving JPEG2000 files using best practices, then your site is using the picture element to offer multiple file format options to every browser. Safari 18.0 will simply no longer choose JPEG2000, and instead use a file compressed in JPEG XL, AVIF, WebP, HEIC, JPG/JPEG, PNG, or Gif — choosing the file that’s best for each user. Only one image will be downloaded when you use <picture>, and the browser does all the heavy lifting.

We have noticed that some Content Deliver Networks (CDN) use User Agent sniffing to provide one file to each UA, offering only JPEG2000 images to Safari — especially on iPhone and iPad. If you expect this might be happening with your site, we recommend testing in Safari 18.0 on both macOS Sequoia and iOS or iPadOS 18. If you see problems, contact your SaaS provider or change your image delivery settings to ensure your website provides fallback images using industry best practices.

If you notice a broken site, please file an issue at webcompat.com.

JavaScript

WebKit for Safari 18.0 removes [[VarNames]] from the global object to reflect changes in the web standard, a change that now allows this code to work:

<script>
eval('var x;')
</script>
<script>
let x;
</script>

Media

WebKit for Safari 18.0 removes support for non-standard VTTRegion.prototype.track.

Storage

WebKit for Safari 18.0 removes the last bits of support for AppCache.

When AppCache first appeared in 2009, in Safari 4, it held a lot of promise as a tool for caching web pages for use offline. It was imagined as “HTML5 Application Cache” back when HTML itself was being further expanded to handle more use cases for web applications. A developer could create a simple cache manifest file with a list of files to be cached. Its simplicity looked elegant, but there was no mechanism for cache busting, and that made both developing a site and evolving the site over time quite frustrating. AppCache also had security challenges. So new web standards were created to replace it. Today, developers use Service Workers and Cache Storage instead.

WebKit deprecated AppCache with a warning to the Console in Safari 11.0. Then in 2021, we removed support for AppCache from Safari 15.0, with a few exceptions for third-party users of WKWebView. Now we are removing those exceptions. This change to WebKit will only affect the rare web content loaded in older third-party apps that have JavaScript code which relies on the existence of AppCache related interfaces.

SVG

WebKit for Safari 18.0 removes the SVGAnimateColorElement interface, as well as the non-standard getTransformToElement from SVGGraphicsElement.

Web API

WebKit for Safari 18.0 removes support for four non-standard Web APIs:

• KeyboardEvent.altGraphKey
• AES-CFB support from WebCrypto
• KeyboardEvent.prototype.keyLocation
• HashChangeEvent’s non-standard initHashChangeEvent() method

WebView

Deprecated some legacy WebKit notification names including:

• WebViewDidBeginEditingNotification
• WebViewDidChangeNotification
• WebViewDidEndEditingNotification
• WebViewDidChangeTypingStyleNotification
• WebViewDidChangeSelectionNotification

Bug Fixes and more

In addition to all the new features, WebKit for Safari 18.0 includes work to polish existing features.

Accessibility

• Fixed role assignment for <header> inside <main> and sectioning elements.
• Fixed range input not firing an input event when incremented or decremented via accessibility APIs.
• Fixed setting aria-hidden on a slot not hiding the slot’s assigned nodes.
• Fixed VoiceOver to read hidden associated labels.
• Fixed comboboxes to expose their linked objects correctly.
• Fixed VoiceOver support for aria-activedescendant on macOS.
• Fixed time input accessibility by adding labels to subfields.
• Fixed aria-hidden=true to be ignored on the <body> and <html> elements.
• Fixed datetime values being exposed to assistive technologies in the wrong timezone.
• Fixed wrong datetime value being exposed to assistive technologies for datetime-local inputs.
• Fixed ignored CSS content property replacement text when it is an empty string.
• Fixed the computed role for these elements: dd, details, dt, em, hgroup, option, s, and strong.
• Fixed hidden elements targeted by aria-labelledby to expose their entire subtree text, not just their direct child text.
• Fixed accessible name computation for elements with visibility: visible inside a container with visibility: hidden.
• Fixed updating table accessibility text when its caption dynamically changes.
• Fixed updating aria-describedby text after the targeted element changes its subtree.

Animations

• Fixed the transition property to produce the shortest serialization.
• Fixed the animation property to produce the shortest serialization.

Apple Pay

• Fixed arbitrary 8 digit limit on a line item’s total amount.

Authentication

• Fixed navigator.credentials.create() rejects with “NotAllowedError: Operation Failed” after a conditional UI request is aborted.
• Fixed setting the cancel flag once the cancel completes regardless of a subsequent request occurring.

Canvas

• Fixed drawImage(detachedOffscreenCanvas) to throw an exception.
• Fixed OffscreenCanvas failing to render to the placeholder with nested workers.
• Fixed losing the contents layer of the placeholder canvas of OffscreenCanvas when switching off the tab.
• Fixed drawImage to not alter the input source or the destination rectangles.
• Fixed toggling the visibility on a canvas parent undoing the effect of clearRect().
• Fixed the Canvas drawImage() API to throw an exception when the image is in broken state.
• Fixed a detached OffscreenCanvas to not transfer an ImageBuffer.

Cookies

• Fixed treating the lack of an explicit “SameSite” attribute as “SameSite=Lax”.

CSS

• Fixed setting white-space to a non-default value dynamically on a whitespace or a new line.
• Fixed custom counter styles disclosure-open and disclosure-closed to point to the correct direction in right-to-left.
• Fixed backface-visibility to create a stacking context and containing block.
• Fixed getComputedStyle() to work with functional pseudo-elements like ::highlight().
• Fixed: Aliased :-webkit-full-screen pseudo-class to :fullscreen.
• Fixed: Aliased :-webkit-any-link to :any-link and :matches() to :is().
• Fixed getComputedStyle() pseudo-element parsing to support the full range of CSS syntax.
• Fixed @supports to correctly handle support for some -webkit prefixed pseudo-elements that were incorrectly treated as unsupported.
• Fixed updating media-query sensitive meta tags after style changes.
• Fixed changing color scheme to update gradients with system colors or light-dark().
• Fixed incorrect inline element size when using font-variant-caps: all-small-caps with font-synthesis.
• Fixed :empty selector to work with animations.
• Fixed preserving whitespace when serializing custom properties.
• Fixed updating style correctly for non-inherited custom property mutations.
• Fixed element removed by parent to end up losing the last remembered size.
• Fixed an incorrect difference between implicit and explicit initial values for custom properties.
• Fixed the contrast of Menu and MenuText system colors.
• Fixed keeping the shorthand value for CSS gap as-is in serialized and computed values.
• Fixed the style adjuster for @starting-style incorrectly invoking with a null element.
• Fixed excluding -apple-pay-button from applying to any element that supports appearance: auto and is not a button.
• Fixed missing color interpretation methods added to CSS color specifications.
• Fixed hsl() and hsla() implementation to match the latest spec changes.
• Fixed the implementation of rgb() and rgba() to match the latest spec.
• Fixed the hwb() implementation to match the latest spec.
• Fixed the remaining color types to be synced with the latest spec changes.
• Fixed carrying analogous components forward when interpolating colors.
• Fixed applying the fill layer pattern for mask-mode.
• Fixed backdrop-filter: blur to render for elements not present when the page is loaded.
• Fixed: Improved large Grid performance.
• Fixed some CSS properties causing quotes to be reset.

Editing

• Fixed an issue where input method editing would sporadically drop the composition range.
• Fixed dictation UI no longer showing up when beginning dictation after focusing an empty text field. (FB14277296)

Forms

• Fixed displayed datalist dropdown to sync its options elements after a DOM update.
• Fixed input elements to use the [value] as the first fallback step base.
• Fixed <select multiple> scrollbars to match the used color scheme.
• Fixed updating the input value when selecting an <option> from a <datalist> element. (FB13688998)
• Fixed the value attribute not getting displayed in an input element with type="email" and the multiple attribute.
• Fixed the iOS animation for <input type=checkbox switch>.
• Fixed form controls drawing with an active appearance when the window is inactive.
• Fixed constructed FormData object to not include entries for the image button submitter by default.

History

• Fixed the properties of History to throw a SecurityError when not in a fully active Document.

HTML

• Fixed “about:blank” document.referrer initialization.
• Fixed parsing a self-closing SVG script element. It now successfully executes.

JavaScript

• Fixed RegExp.prototype.@@split to update the following legacy RegExp static properties: RegExp.input, RegExp.lastMatch, RegExp.lastParen, RegExp.leftContext, RegExp.rightContext, and RegExp.$1, ... RegExp.$9.
• Fixed String.prototype.replace to not take the fast path if the pattern is RegExp Object and the lastIndex is not numeric.
• Fixed spec compliance for Async / Await, Generators, Async Functions, and Async Generators.
• Fixed async functions and generators to properly handle promises with throwing “constructor” getter.
• Fixedreturn in async generators to correctly await its value.
• Fixed Symbol.species getters to not share a single JS Function.
• Fixed throwing a RangeError if Set methods are called on an object with negative size property.
• Fixed eval() function from another realm to not cause a direct eval call.
• Fixed eval() call with ...spread syntaxt to be a direct call.
• Fixed try/catch to not intercept errors originated in [[Construct]] of derived class.
• Fixed several issues:
  • direct eval() in a default value expression inside a rest parameter creates a variable in the environment of the function rather than the separate one of the parameters;
  • a ReferenceError is thrown when accessing a binding, which is defined inside rest parameter, in eval(), or a closure created in a default value expression of a preceding parameter, but only if there is a var binding by the same name;
  • a closure, created in the default value expression inside a rest parameter, is created in a different VariableEnvironment of the function than its counterparts in preceding parameters which causes the incorrect environment to be consulted when querying or modifying parameter names that are “shadowed” by var bindings.
• Fixed TypedArray sorting methods to have a special-case for camparator returning false.
• Fixed programming style for bitwise and in setExpectionPorts.
• Fixed emitReturn() to load this value from arrow function lexical environment prior to the TDZ check.
• Fixed NFKC normalization to work with Latin-1 characters.
• Fixed parsing of private names with Unicode start characters.
• Fixed instanceof to not get RHS prototype when LHS is primitive.
• Fixed bracket update expression to resolve property key at most once.
• Fixed bracket compound assignement to resolve the property key at most once.
• Fixed Object.groupBy and Map.groupBy to work for non-objects.
• Fixed Array.fromAsync to not call the Array constructor twice.
• Fixed inconsistent output of Function.prototype.toString for accessor properties.
• Fixed Set#symmetricDifference to call this.has in each iteration.
• Fixed logical assignment expressions to throw a syntax error when the left side of the assignment is a function call.
• Fixed throwing a syntax error for nested duplicate-named capturing groups in RegEx.
• Fixed ArrayBuffer and SharedArrayBuffer constructor to check length before creating an instance.
• Fixed Intl implementation to ensure canonicalizing “GMT” to “UTC” based on a spec update.
• Fixed RegEx lookbehinds differing from v8.
• Fixed fractionalDigits of Intl.DurationFormat to be treated as at most 9 digits if it is omitted.
• Fixed optimized TypedArrays giving incorrect results.
• Fixed Intl.DurationFormat for numeric and 2-digit.

Loading

• Fixed navigator.cookieEnabled to return false when cookies are blocked.

Media

• Fixed MediaSession to determine the best size artwork to use when the sizes metadata attribute is provided. (FB9409169)
• Fixed video sound coming from another window after changing tabs in the Tab Bar in visionOS.
• Fixed playback for MSE videos on some sites.
• Fixed allowing a video’s currentTime to be further than the gap’s start time.
• Fixed broken audio playback for a WebM file with a Vorbis track.
• Fixed sampleRate and numberOfChannels to be required and non-zero in a valid AudioEncoderConfig.
• Fixed media elements appending the same media segment twice.
• Fixed an issue where Safari audio may be emitted from the wrong window in visionOS.
• Fixedrejecting valid NPT strings if ‘hours’ is defined using 1 digit.
• Fixed picture-in-picture when hiding the <video> element while in Viewer.
• Fixed the return button not working after the video is paused and played in picture-in-picture.

Networking

• Fixed upgrading inactive or passive subresource requests and fetches in would-be mixed security contexts to match standards.
• Fixed incorrect Sec-Fetch-Site value for navigation of a nested document.
• Fixed loading WebArchives with a non-persistent datastore.
• Fixed Timing-Allow-Origin to not apply to an HTTP 302 response.

PDF

• Fixed print buttons with a print action implementation.
• Fixed Open in Preview for a PDF with a space in its name.
• Fixed “Open with Preview” context menu item to work with locked PDF documents.

Rendering

• Fixed Greek uppercase transforms failing for some characters.
• Fixed resizing a <textarea> element with 1rem padding.
• Fixed the color correctness of the color matrix filter.
• Fixed backdrop-filter to apply to the border area of an element with a border-radius.
• Fixed intrinsic inline size calculators to account for whitespace before an empty child with nonzero margins.
• Fixed overlapping elements with flex box when height: 100% is applied on nested content.
• Fixed incorrect grid item positioning with out-of-flow sibling.
• Fixed break-word with a float discarding text.
• Fixed min-content calculation for unstyled only-child inlines elements.
• Fixed ellipsis rendering multiple times when position: relative and top are used.
• Fixed a bug for inline elements inserted in reverse order after a block in a continuation.
• Fixed the flash of a page background-colored bar in the footer when the window is resized.
• Fixed garbled bold text caused by glyph lookup using the wrong font’s glyph IDs when multiple installed fonts have the same name. (FB13909556)
• Fixed selecting Japanese text annotated with ruby in a vertical-rl writing mode table.
• Fixed support for border, padding, and margin on mfrac and mspace elements in MathML.

Scrolling

• Fixed the cursor not updating as content scrolls under it on some pages.

Security

• Fixed stripping the scroll-to-text fragment from the URL to prevent exposing the fragment to the page.
• Fixed CORS bypass on private localhost domain using 0.0.0.0 host and mode “no-cors”.
• Fixed blocking cross-origin redirect downloads in an iframe.
• Fixed blocked cross-origin redirect downloads to attempt rendering the page instead.

SVG

• Fixed the SVG parser to interpret “form feed” as white space.
• Fixed error handling for invalid filter primitive references.
• Fixed displaying an SVG element inside a <switch> element.
• Fixed SVG title to have display: none as the default UA style rule.
• Fixed the UA stylesheet for links in SVGs to apply cursor: pointer matching standards.
• Fixed returning the initial value for the SVG gradient stop-color if it is not rendered in the page.
• Fixed the SVG marker segment calculations if the marker path consists of sub-paths.
• Fixed SVGLength to sync with the WebIDL specification.

Text

• Fixed disclosure counter styles to consider writing-mode.

Web Animations

• Fixed percentage transform animations when width and height are animated.
• Fixed updating an animation when changing the value of a transform property while that property is animated with an implicit keyframe.
• Fixed display transition to none.

Web API

• Fixed cssTextsetter to change the style attribute when the serialization differs. (FB5535475)
• Fixed history.pushState() and history.replaceState() to ignore the title argument.
• Fixed URL text fragment directives not fully stripped from JavaScript.
• Fixed showPicker() method to trigger suggestions from a datalist.
• Fixed lang attribute in no namespace to only apply to HTML and SVG elements.
• Fixed unnecessarily unsetting the iframe fullscreen flag.
• Fixed DOM Range to correctly account for CDATASection nodes.
• Fixed getGamepads() to no longer trigger an insecure contexts warning.
• Fixed inserting a <picture> element displaying the same image twice.
• Fixed throwing exceptions in navigation methods if in a detached state.
• Fixed a minor issue in URL’s host setter.
• Fixed cloning of ShadowRoot nodes following a DOM Standard clarification.
• Fixed GeolocationCoordinates to expose a toJSON() method.
• Fixed IntersectionObserver notifications that sometimes fail to fire.
• Fixed GeolocationPosition to expose a toJSON() method.
• Fixed setting CustomEvent.target when dispatching an event.
• Fixed navigator.language only returning the system language in iOS 17.4.
• Fixed: Removed presentational hints from the width attribute for <hr>.
• Fixed an issue when inserting writing suggestions into an editable display: grid container.
• Fixed the warning message for window.styleMedia.

Web Apps

• Fixed resolving www. sub-domain for Associated Domains for all web apps.

Web Assembly

• Fixed initialization of portable reference typed globals.

Web Extensions

• Fixed getting an empty key from storage. (FB11427769)
• Fixed Service Workers not appearing in the Develop menu or remote Web Inspector menu. (130712941)
• Fixed web extensions unable to start due to an issue parsing declarativeNetRequest rules. (FB14145801)

Web Inspector

• Fixed font sizes in the Audits tab.
• Fixed expanded sections of Storage to not collapse.
• Fixed Web Inspector to show nested workers.
• Fixed CSS font property values marked !important not getting overridden when using the interactive editing controls.
• Fixed an issue where the Web Inspector viewport might appear cut off.
• Fixed runtimes to be aligned in the Audit tab.
• Fixed remembering the message type selection in the Console tab.
• Fixed autocomplete for the text-indent property suggesting prefixed properties instead of each-line or hanging.
• Fixed background autocompletion suggestion to include repeating-conic-gradient.
• Fixed the list of breakpoints in the Sources tab disappearing when Web Inspector is reloaded.
• Fixed console clearing unexpectedly when Web Inspector reopens.
• Fixed console code completion to be case-insensitive.
• Fixed overflow: scroll elements to scroll as expected when highlighting an element from the DOM tree.
• Fixed showing additional Safari tabs from an iOS device in the Develop menu.
• Fixed Console and code editor completion not auto-scrolling the suggestion into view.
• Fixed search in the DOM tree view unexpectedly chaning the text display.
• Fixed clicking the “goto” arrow for computed CSS when “show independent Styles sidebar” is disabled.
• Fixed inspectable tabs from Safari in the visionOS Simulator don’t appear in Developer menu on the host macOS.
• Fixed Accessibility inspector for switch controls to report “State: on/off” instead of “Checked: true/false”.

Web Views

• Fixed Gamepad API in WKWebView.
• Fixed repainting HTML elements when their width or height change in legacy WebView.

WebDriver

• Fixed retrieving titles containing multibyte characters.

WebRTC

• Fixed RTCEncodedVideoFrame and RTCEncodedAudioFrame to match the WebIDL specification.
• Fixed VideoTrackGenerator writer to close when its generator track (and all its clones) are stopped.
• Fixed WebRTC AV1 HW decoding on iPhone 15 Pro.
• Fixed black stripes with screen sharing windows.
• Fixed black stripes with getDisplayMedia captured windows when the window is resized.

Updating to Safari 18.0

Safari 18.0 is available on iOS 18, iPadOS 18, macOS Sequoia, macOS Sonoma, macOS Ventura, and in visionOS 2.

If you are running macOS Sonoma or macOS Ventura, you can update Safari by itself, without updating macOS. Go to  > System Settings > General > Software Update and click “More info…” under Updates Available.

To get the latest version of Safari on iPhone, iPad or Apple Vision Pro, go to Settings > General > Software Update, and tap to update.

Feedback

We love hearing from you. To share your thoughts on Safari 18.0, find us on Mastodon at @jensimmons@front-end.social and @jondavis@mastodon.social. Or send a reply on X to @webkit. You can also follow WebKit on LinkedIn. If you run into any issues, we welcome your feedback on Safari UI (learn more about filing Feedback), or your WebKit bug report about web technologies or Web Inspector. If you notice a website that seems broken in Safari, but not in other browsers, please file a report at webcompat.com. Filing issues really does make a difference.

Download the latest Safari Technology Preview on macOS to stay at the forefront of the web platform and to use the latest Web Inspector features.

You can also find this information in the Safari 18.0 release notes.

1. iPhone Mirroring is available on Mac computers with Apple silicon and Intel-based Mac computers with a T2 Security Chip. Requires that your iPhone and Mac are signed in with the same Apple ID using two-factor authentication, your iPhone and Mac are near each other and have Bluetooth and Wi-Fi turned on, and your Mac is not using AirPlay or Sidecar. iPhone Mirroring is not available in all regions.

This release includes WebKit changes between: 282390@main…283042@main.

Accessibility

Resolved Issues

• Fixed display: contents on tbody elements preventing table rows from being properly exposed in the accessibility tree. (282413@main) (129131780)
• Fixed the handling of ElementInternals.ariaValueNow null values so the right value is exposed to assistive technologies. (282422@main) (129218234)
• Fixed updating the accessibility tree when text underneath an aria-describedby element changes. (282430@main) (131877635)

Canvas

Resolved Issues

• Fixed CanvasRenderingContext2D globalAlpha property getting ignored for some values of globalCompositeOperation. (282995@main) (134840885)

CSS

New Features

• Added support for scrollbar-gutter. (282662@main) (111918434)
• Added support for cursor in ::marker. (282642@main) (133256523)
• Added support for ruby-overhang. (283012@main) (135058411)

Resolved Issues

• Fixed text-underline-offset to support percentages. (282611@main) (117246233)
• Fixed: Updated calc() to the most recent web standard, including support for dividing by numbers with additional units. (282580@main) (134446246)

Editing

Resolved Issues

• Fixed aligning with the standardized version of the autocorrect attribute, which does not support Email, URL, and Password fields and does not treat the empty string value in a special way. (282792@main) (101036922)
• Fixed inserting text before a <picture> element inserting the text after the element instead. (282825@main) (134378236)

JavaScript

New Features

• Added support for Iterator.prototype.constructor and Iterator.prototype[@@toStringTag]. (282687@main) (134598491)
• Added support for Iterator.from from Iterator Helpers Proposal. (283016@main) (135065388)

Resolved Issues

• Fixed: Disallow yield and await expressions in class field initializers. (282819@main) (132338331)
• Fixed Object.keys(global) including non-enumerable properties unless deleted first. (282554@main) (134121649)
• Fixed the error message of Temporal.Instant.fromEpochMilliseconds. (282587@main) (134454596)
• Fixed duration format’s nanoseconds calculation ordering. (282690@main) (134526619)
• Fixed TimeZoneAnnotation to disallow sub-minute. (282710@main) (134541964)
• Fixed: Temporal.Instant.prototype.epochMilliseconds to return a floored value. (282718@main) (134666158)

Deprecations

• Remove obsoleted Temporal.Instant API. (282400@main) (134195010)

Media

New Features

• Added support for allowing websites to override the system-default accessibility caption styling. (282568@main) (134265139)

Resolved Issues

• Fixed a bug in WebCodecs where audio and video codecs with pending work could be prematurely garbage collected. (282657@main) (134297589)

Networking

Resolved Issues

• Fixed a bug where Cross-Origin-Opener-Policy header fields in the response of iframes were not ignored, resulting in window.opener being null after multiple cross-origin navigations of the main frame. (282482@main) (132840366)

Rendering

Resolved Issues

• Fixed items that span multiple tracks with optimizations. (282464@main) (132435056)
• Fixed rendering tick marks of the range input type when the page zoom is less than 1. (282451@main) (134282707)

SVG

Resolved Issues

• Fixed an issue for getPointAtLength to throw an exception when path is empty. (282665@main) (122574451)

Web API

Resolved Issues

• Fixed: Changed click, auxclick, contextmenu, and click() to use PointerEvent. (282524@main) (71202646)
• Fixed: Aligned oncuechange event handler handling with other event handlers. (282977@main) (98254058)
• Fixed popovertarget to work on buttons in a form. (282801@main) (131042177)
• Fixed XMLSerializer.serializeToString() not serializing the children of <img> and also not closing the <img> if it has children. (282725@main) (133404338)
• Fixed: Moved onbeforeinput to GlobalEventHandlers. (282912@main) (134943272)

Web Apps

New Features

• Parse dir member of Web Application Manifest. (282761@main) (131900106)

Resolved Issues

• Fixed Web Application Manifest parsing to trim all ASCII whitespace. (282544@main) (134336817)

Web Assembly

New Features

• Added support for return_call_ref. (282853@main) (134442713)

Web Extensions

Resolved Issues

• Fixed Safari Web Extension ports to receive messages in content scripts when sent from the onConnect event listener. (283006@main) (133501214) (FB14721836)

Web Inspector

New Features

• Added support for sourcemaps to be blackboxed. (282740@main) (133731737)
• Added support for showing boundThis for arrow functions in the console. (282553@main) (134268331)

This release includes WebKit changes between: 281465@main…282389@main.

Accessibility

Resolved Issues

• Fixed text-transform: full-size-kana to not affect AT/speech output. (282258@main) (115504070)

CSS

New Features

• Added support for background-clip: border-area. (282202@main) (133788384)
• Added support for line-fit-edge and updated text-box-edge. (282228@main) (133834296)
• Added support for the text-box shorthand. (282282@main) (133942602)
• Added support for ruby-align. (282106@main) (133656625)
• Added support for unprefixed ruby-position. (281804@main) (86128259)
• Added support for scrollbar-width. (282068@main) (133019206)
• Added support for view transition classes. (282383@main) (134020027)
• Added support for view transition types. (282344@main) (133610087)
• Added support for the shape() function. (281924@main) (133322584)
• Added support for closest-corner and farthest-corner in circle and ellipse shapes. (281808@main) (132936677)
• Added support for the color-layers() function. (282334@main) (134013898)
• Added support for @property <string> syntax. (281872@main) (133250776)
• Added support for ::target-text. (282356@main) (134010063)
• Added support for @page margin descriptors. (282048@main) (118773100)
• Added support for jis-b4 and jis-b5 sizes for @page. (281814@main) (133138325)

Resolved Issues

• Fixed -webkit-line-clamp: none to be parsable. (281826@main) (103158259)
• Fixed serialization of place-content, place-items, and place-self properties. (281476@main) (125415088)
• Fixed masonry intrinsic sizing with fixed size and auto. (281677@main) (132849745)

Editing

Resolved Issues

• Fixed dictation UI no longer showing up when beginning dictation after focusing an empty text field. (281474@main) (131534054) (FB14277296)

JavaScript

New Features

• Implemented Float16Array. (281870@main) (109883982)
• Added support for firstDayOfWeek for Intl.Locale info API. (281510@main) (132731533)
• Enabled Base64 and Hex features. (281910@main) (133312461)
• Added support for type reflection for WebAssembly.Module.imports and WebAssembly.Module.exports. (281974@main) (133429946)

Resolved Issues

• Fixed roundingMode for seconds, microseconds, and nanoseconds in Intl.DurationFormat. (281955@main) (130771643)

Media

Resolved Issues

• Fixed fullscreen error handling to include error messages. (281853@main) (103073510)

Rendering

Resolved Issues

• Fixed margins used for grid items on relayout. (282092@main) (113984882)

SVG

Resolved Issues

• Fixed correctly applying clip-path to the SVG element. (281893@main) (80516912)
• Fixed fill to not be considered a presentation attribute on animation elements. (282100@main) (128896937)

Web Animations

Resolved Issues

• Fixed alignment-baseline and buffered-rendering to support discrete animation. (281602@main) (94613679)
• Fixed hanging-punctuation to support discrete animation. (281616@main) (94614108)
• Fixed scroll-snap-* properties to support discrete animation. (281572@main) (94614257)
• Fixed column-span to support discrete animation. (281505@main) (96082973)
• Fixed appearance to support discrete animation. (281568@main) (96082999)
• Fixed hyphenate-character to support discrete animation. (281484@main) (132698836)
• Fixed font-optical-sizing to support discrete animation. (281489@main) (132699150)
• Fixed image-rendering to support discrete animation. (281506@main) (132707652)
• Fixed the mask-border-* properties to be animatable. (281569@main) (132783274)
• Fixed stroke-color to be animatable. (281570@main) (132784589)

Web API

New Features

• Added support for the getPredictedEvents API to PointerEvent. (281756@main) (117767174)
• Added support for Scroll To Text Fragment Generation. (282379@main) (131712706)
• Added support for altitudeAngle and azimuthAngle to PointerEvent. (282017@main) (131974392)
• Added support for the getCoalescedEvents API to PointerEvent. (281520@main) (132210576)

Deprecations

• Removed support for the non-standard “overflow” event. (281672@main) (71129110)

Web Assembly

New Features

• Added support for JIT-less Wasm. (281726@main) (113768974)
• Added support for garbage collection. (281975@main) (126103011)
• Added support for Wasm Tail Calls. (281716@main) (131410516)

WebDriver

Resolved Issues

• Fixed WebDriver sometimes taking screenshots with a transparent grey line at the top and no rounded corners. (281887@main) (116020785)

This release includes WebKit changes between: 281144@main…281464@main.

CSS

Resolved Issues

• Fixed defaults for text underline position and text emphasis marks in CJK languages. (281445@main) (132444497)
• Fixed some CSS properties causing quotes to be reset. (281444@main) (132585704)

DOM

New Features

• Added auxclick event support for Pointer Events. (281169@main) (25988904)
• Implemented new dialog initial focus algorithm to match specification changes. (281215@main) (104667732)

Resolved Issues

• Fixed pointer events generated from platform mouse events to use the platform event’s timestamp. (281161@main) (132051812)
• Fixed popover tab navigation. (281167@main) (132129060)
• Fixed two mousemove events dispatched when the mouse enters a web view window instead of a single one. (281225@main) (132251320)

JavaScript

Resolved Issues

• Fixed Uint8Array#setFromBase64 to decode and write chunks which occur prior to bad data. (281174@main) (132198988)

Media

Resolved Issues

• Fixed picture-in-picture when hiding the <video> element while in Viewer. (281266@main) (131786564)
• Fixed the return button not working after the video is paused and played in picture-in-picture. (281145@main) (131791367)

PDF

Resolved Issues

• Fixed “Open with Preview” context menu item to work with locked PDF documents. (281413@main) (132033502)

Rendering

New Features

• Added support for text-underline-position: left and text-underline-position: right. (281446@main) (130621143)

SVG

Resolved Issues

• Fixed zooming in or out of an SVG with transform-origin. (281265@main) (96318505)

Web Animations

New Features

• Added support for discrete animations on text-underline-position. (281245@main) (94615165)
• Added support for discrete animations on text-box-edge. (281252@main) (132303461)

Web Extensions

Resolved Issues

• Fixed web extensions unable to start due to an issue parsing declarativeNetRequest rules. (130861213) (FB14145801)
• Fixed web extensions not able to display images defined in web_accessible_resources. (281157@main) (131750151) (FB14319689)

This release includes WebKit changes between: 280675@main…281143@main.

CSS

Resolved Issues

• Fixed: Optimized Masonry Grids for items with a span of 1. (280919@main) (131407028)

JavaScript

New Features

• Implemented Uint8Array.prototype.toHex in SIMD. (280719@main) (131249821)

Resolved Issues

• Fixed class field initializers to disallow yield and await expressions. (280837@main) (119044881)

• Fixed DestructuringAssignmentTarget to be evaluated prior to calling [[Get]] or a stepping iterator. (281013@main) (121960976)

• Fixed throwing an exception for negative exponent in BigInt in the JIT compiler. (280841@main) (131051084)

• Fixed RegExp range quantifier to allow 2^53 – 1. (280953@main) (131710011)

Rendering

Resolved Issues

• Fixed garbled bold text caused by glyph lookup using the wrong font’s glyph IDs when multiple installed fonts have the same name. (281022@main) (129891005) (FB13909556)

• Fixed scrolling of content overflowing a flex item in an end-aligned flex container. (279992@main) (131201271)

Web Extensions

Resolved Issues

• Fixed Service Workers not appearing in the Develop menu or remote Web Inspector menu. (280912@main) (130712941)

Safe alignment in Flexbox

Announced at WWDC and first seen in Safari 18 beta, the safe keyword for alignment in Flexbox is now arriving in WebKit for Safari 17.6. This provides a mechanism for refining how flex items overflow. Let’s look at an example of a simple navigation menu — a classic use of Flexbox.

<nav aria-label="main"><ul>
  <li><a href="/us">U.S.</a></li>
  <li><a href="/business">Business</a></li>
  <li><a href="/investigations">Investigations</a></li>
  <li><a href="/style">Style</a></li>
  <li><a href="/tech">Tech</a></li>
  <li><a href="/world">World</a></li>
</ul></nav>

The following CSS creates a simple layout that wraps when there’s not enough space on one line for the menu, while centering the items in the available space.

header nav {
  display: flex;
  flex-flow: wrap;
  gap: 1.5rem;
  justify-content: center; /* centers the items in the available space */
}

By default, justify-content: center will always keep the items centered, even when the content is overflowing the containing box. You might prefer, however, that the content not be centered when it overflows — being centered cuts off both the beginning and end of the word, making the content harder to understand when the overflow is not visible.

The safe keyword lets you change how alignment works when content overflows. The justify-content: safe center rule will instead start align any item that is overflowing, while continuing to center the items that are not overflowing.

If you want to override the safe keyword, you can use unsafe. The justify-content: unsafe center rule will do the same thing as justify-content: center. The unsafe keyword has been supported in WebKit for Safari for quite some time.

Bug Fixes

WebKit for Safari 17.6 includes work polishing existing features.

Media

• Fixed firing loadeddata events for <audio> and <video> on page load. (124079735) (FB13675360)
• Fixed multiple cases of audio distortion occurring when using AudioWorklets. (128551401)

PDF

• Fixed PDF previews appearing tiny in the top left corner. (125796665)

Rendering

• Fixed scrolling of content overflowing a flex item in an end-aligned flex container. (131201271)

Safari Web Extensions

• Fixed an issue where Safari Web Extension background pages would stop responding after about 30 seconds. (127681420)

Web Inspector

• Fixed showing additional Safari tabs from an iOS device in the Develop menu. (124876362)

WebRTC

• Fixed navigator.mediaDevices.getDisplayMedia() in WKWebView. (128988615)

Updating to Safari 17.6

Safari 17.6 is available on iOS 17.6, iPadOS 17.6, macOS Sonoma 14.6, macOS Ventura, macOS Monterey and in visionOS 1.3.

If you are running macOS Ventura or macOS Monterey, you can update Safari by itself, without updating macOS. On macOS Ventura, go to  > System Settings > General > Software Update and click “More info…” under Updates Available.

To get the latest version of Safari on iPhone, iPad, or Apple Vision Pro, go to Settings > General > Software Update, and tap to update.

Feedback

We love hearing from you. To share your thoughts on Safari 17.6, find us on Mastodon at @jensimmons@front-end.social and @jondavis@mastodon.social. Or send a reply on X to @webkit. You can also follow WebKit on LinkedIn. If you run into any issues, we welcome your feedback on Safari UI (learn more about filing Feedback), or your WebKit bug report about web technologies or Web Inspector. If you notice a website that seems broken in Safari, but not in other browsers, please file a report at webcompat.com. Filing issues really does make a difference.

Download the latest Safari Technology Preview on macOS to stay at the forefront of the web platform and to use the latest Web Inspector features.

You can also find this information in the Safari 17.6 release notes.

This release includes WebKit changes between: 280287@main…280674@main.

Apple Pay

Resolved Issues

• Fixed arbitrary 8 digit limit on a line item’s total amount. (280584@main) (112078798)

CSS

New Features

• Added support for (prefers-contrast: custom). (280383@main) (103658875)

Resolved Issues

• Fixed computed values for text-box-edge. (280413@main) (117643064)
• Fixed: Improved large Grid performance. (280473@main) (130728344)

Editing

Resolved Issues

• Fixed an issue where input method editing would sporadically drop the composition range. (280291@main) (130020224)

JavaScript

New Features

• Added support for Uint8Array.prototype.toBase64 and Uint8Array.prototype.toHex. (280654@main) (129045737)

Resolved Issues

• Fixed Intl.DurationFormat for numeric and 2-digit. (280460@main) (130279541)

Media

Resolved Issues

• Fixed missing picture-in-picture when leaving Safari with picture-in-picture enabled from video viewer. (279877@main) (124376686)
• Fixed a hang in WebAudio. (280604@main) (130531570)

Rendering

Resolved Issues

• Fixed support for border, padding, and margin on mfrac and mspace elements in MathML. (280665@main) (131119823)

Text

Resolved Issues

• Fixed disclosure counter styles to consider writing-mode. (280433@main) (130468537)

WebRTC

Resolved Issues

• Fixed RTCAudioPlayoutStats to match web specifications. (280461@main) (130767124)

We baked in cross-site tracking prevention in all Safari browsing through our cookie policy, starting with Safari 1.0 in 2003. And we’ve increased privacy protections incrementally over the last 20 years. (Learn more by reading Tracking Prevention in Webkit.) Other popular browsers have not been as quick to follow our lead in tracking prevention but there is progress.

Apple believes that users should not be tracked across the web without their knowledge or their consent. Entering Private Browsing is a strong signal that the user wants the best possible protection against privacy invasions, while still being able to enjoy and utilize the web. Staying with the 2005 definition of private mode as only being ephemeral, such as Chrome’s Incognito Mode, simply doesn’t cut it anymore. Users expect and deserve more.

So, we decided to take Private Browsing further and add even more protection beyond the normal Safari experience. Last September, we added a whole new level of privacy protections to Private Browsing in Safari 17.0. And we enhanced it even further in Safari 17.2 and Safari 17.5. Plus, when a user enables them, all of the new safeguards are available in regular Safari browsing too.

With this work we’ve enhanced web privacy immensely and hope to set a new industry standard for what Private Browsing should be.

Enhanced Private Browsing in a Nutshell

These are the protections and defenses added to Private Browsing in Safari 17.0:

• Link Tracking Protection
• Blocking network loads of known trackers, including CNAME-cloaked known trackers
• Advanced Fingerprinting Protection
• Extensions with website or history access are off by default

In addition, we added these protections and defenses in all browsing modes:

• Capped lifetime of cookies set in responses from cloaked third-party IP addresses
• Partitioned SessionStorage
• Partitioned blob URLs (starting in Safari 17.2)

We also expanded Web AdAttributionKit (formerly Private Click Measurement) as a replacement for tracking parameters in URL to help developers understand the performance of their marketing campaigns even under Private Browsing.

However, before we dive into these new and enhanced privacy protections, let’s first consider an important aspect of these changes: website compatibility risk.

The Risk of Breaking Websites and How We Mitigate It

There are many ideas for how to protect privacy on the web, but unfortunately many of them may break the user’s experience. Like security protections in real life, a balance must be struck. The new Private Browsing goes right up to the line, attempting to never break websites. But of course there is a risk that some parts of some sites won’t work. To solve this, we give users affordances to reduce privacy protections on a per-site basis. Such a change in privacy protections is only remembered while browsing within a site. This option is a last resort when a web page is not usable due to the privacy protections.

All of the new privacy protections in Private Browsing are also available in regular browsing. On iOS, iPadOS and visionOS go to Settings > Apps > Safari > Advanced > Advanced Tracking and Fingerprinting Protection and enable “All Browsing”. On macOS go to Safari > Settings > Advanced and enable “Use advanced tracking and fingerprinting protection”:

Let’s now walk through how these enhancements work.

Link Tracking Protection

Safari’s Private Browsing implements two new protections against tracking information in the destination URL when the user navigates between different websites. The specific parts of the URL covered are query parameters and the fragment. The goal of these protections is to make it more difficult for third-party scripts running on the destination site to correlate user activity across websites by reading the URL.

Let’s consider an example where the user clicks a link on clickSource.example, which takes them to clickDestination.example. The URL looks like this:

https://clickDestination.example/article?known_tracking_param=123&campaign=abc&click_val=456

Safari removes a subset of query parameters that have been identified as being used for pervasive cross-site tracking granular to users or clicks. This is done prior to navigation, such that these values are never propagated over the network. If known_tracking_param above represents such a query parameter, the URL that’s used for navigation will be:

https://clickDestination.example/article?campaign=abc&click_val=456

As its name suggests, the campaign above represents a parameter that’s only used for campaign attribution, as opposed to click or user-level tracking. Safari allows such parameters to pass through.

Finally, on the destination site after a cross-site navigation, all third-party scripts that attempt to read the full URL (e.g. using location.search, location.href, or document.URL) will get a version of the URL that has no query parameters or fragment. In our example, this script-exposed value is simply:

https://clickDestination.example/article

In a similar vein, Safari also hides cross-site any document.referrer from script access in Private Browsing.

Web AdAttributionKit in Private Browsing

Web AdAttributionKit (formerly Private Click Measurement) is a way for advertisers, websites, and apps to implement ad attribution and click measurement in a privacy-preserving way. You can read more about it here. Alongside the new suite of enhanced privacy protections in Private Browsing, Safari also brings a version of Web AdAttributionKit to Private Browsing. This allows click measurement and attribution to continue working in a privacy-preserving manner.

Web AdAttributionKit in Private Browsing works the same way as it does in normal browsing, but with some limits:

• Attribution is scoped to individual Private Browsing tabs, and transfers attribution across new tabs opened when clicking on links. However, attribution is not preserved through other indirect means of navigation: for instance, copying a link and pasting in a new tab. In effect, this behaves similarly to how Web AdAttributionKit works for Direct Response Advertising.
• Since Private Browsing doesn’t persist any data, pending attribution requests are discarded when the tab is closed.

Blocking Network Loads of Known Trackers

Safari 17.0 also comes with an automatically enabled content blocker in Private Browsing, which blocks network loads to known trackers. While Intelligent Tracking Prevention has long blocked all third party cookies, blocking trackers’ network requests from leaving the user’s device in the first place ensures that no personal information or tracking parameters are exfiltrated through the URL itself.

This automatically enabled content blocker is compiled using data from DuckDuckGo and from the EasyPrivacy filtering rules from EasyList. The requests flagged by this content blocker are only entries that are flagged as trackers by both DuckDuckGo and EasyPrivacy. In doing so, Safari intentionally allows most ads to continue loading even in Private Browsing.

Private Browsing also blocks cloaked network requests to known tracking domains. They otherwise have the ability to save third party cookies in a first-party context. This protection requires macOS Sonoma or iOS 17. By cloaked we mean subdomains mapped to a third-party server via CNAME cloaking or third-party IP address cloaking. See also the “Defending Against Cloaked First Party IP Addresses” section below.

When Safari blocks a network request to a known tracker, a console message of this form is logged, and can be viewed using Web Inspector:

`Blocked connection to known tracker: tracker.example` 

Network Privacy Enhancements

Safari 15.0 started hiding IP addresses from known trackers by default. Private Browsing in Safari 17.0 adds the following protections for all users:

• Encrypted DNS. DNS queries are used to resolve server hostnames into IP addresses, which is a necessary function of accessing the internet. However, DNS is traditionally unencrypted, and allows network operators to track user activity or redirect users to other servers. Private Browsing uses Oblivious DNS over HTTPS by default, which encrypts and proxies DNS queries to protect the privacy and integrity of these lookups.
• Proxying unencrypted HTTP. Any unencrypted HTTP resources loaded in Private Browsing will use the same multi-hop proxy network used to hide IP addresses from trackers. This ensures that attackers in the local network cannot see or modify the content of Private Browsing traffic.

Additionally, for iCloud+ subscribers who have iCloud Private Relay turned on, Private Browsing takes privacy to the next level with these enhancements:

• Separate sessions per tab. Every tab that the user opens in Private Browsing now uses a separate session to the iCloud Private Relay proxies. This means that web servers won’t be able to tell if two tabs originated on the same device. Each session is assigned egress IP addresses independently. Note that this doesn’t apply to parent-child windows that need a programmatic relationship, such as popups and their openers.
• Geolocation privacy by default. Private Browsing uses an IP location based on your country and time zone, not a more specific location.
• Warnings before revealing IP address. When accessing a server that is not accessible on the public internet, such as a local network server or an internal corporate server, Safari cannot use iCloud Private Relay. In Private Browsing, Safari now displays a warning requesting that the user consents to revealing their IP address to the server before loading the page.

Extensions in Private Browsing

Safari 17.0 also boosts the privacy of Extensions in Private Browsing. Extensions that can access website data and browsing history are now off by default in Private Browsing. Users can still choose to allow an extension to run in Private Browsing and gain all of the extension’s utility. Extensions that don’t access webpage contents or browsing history, like Content Blockers, are turned on by default in Private Browsing when turned on in Safari.

Advanced Fingerprinting Protection

With Safari and subsequently other browsers restricting stateful tracking (e.g. cross-site cookies), many trackers have turned to stateless tracking, often referred to as fingerprinting.

Types of Fingerprinting

We distinguish these types of fingerprinting:

• Device fingerprinting. This is about building a fingerprint based on device characteristics, including hardware and the current operating system and browser. It can also include connected peripherals if they are allowed to be detected. Such a fingerprint cannot be changed by the user through settings or web extensions.
• Network and geographic position fingerprinting. This is about building a fingerprint based on how the device connects to the Internet and any means of detecting its geographic position. It could be done by measuring roundtrip speeds of network requests or simply using the IP address as an identifier.
• User settings fingerprinting. This is about reading the state of user settings such as dark/light mode, locale, font size adjustments, and window size on platforms where the user can change it. It also includes detecting web extensions and accessibility tools. We find this kind of fingerprinting to be extra hurtful since it exploits how users customize their web experience to fit their needs.
• User behavior fingerprinting. This is about detecting recurring patterns in how the user behaves. It could be how the mouse pointer is used, how quickly they type in form fields, or how they scroll.
• User traits fingerprinting. This is about figuring out things about the user, such as their interests, age, health status, financial status, and educational background. Those gleaned traits can contribute to a unique ID but also can be used directly to target them with certain content, adjust prices, or tailor messages.

Fingerprint Stability

A challenge for any tracker trying to create a fingerprint is how stable the fingerprint will be over time. Software version fingerprinting changes with software updates, web extension fingerprinting changes with extension updates and enablement/disablement, user settings change when the user wants, multiple users of the same device means behavior fingerprints change, and roaming devices may change network and geographic position a lot.

Fingerprinting Privacy Problem 1: Cross-Site Tracking

Fingerprints can be used to track the user across websites. If successful, it defeats tracking preventions such as storage partitioning and link decoration filtering.

There are two types of solutions to this problem:

1. Make the fingerprint be shared among many users, so called herd immunity.
2. Make the fingerprint unique per website, typically achieved via randomized noise injection.

Fingerprinting Privacy Problem 2: Per-Site User Recall

Less talked about is the fingerprinting problem of per-site user recall. Web browsers offer at least two ways for the user to reset their relationship with a website: Clear website data or use Private Browsing. Both make a subsequent navigation to a website start out fresh.

But fingerprinting defeats this and allows a website to remember the user even though they’ve opted to clear website data or use Private Browsing.

There are two types of solutions to this problem:

1. Make the fingerprint be shared among many users, so called herd immunity.
2. Make the fingerprint unique per website, and generate a new unique fingerprint for every fresh start.

Fingerprinting Privacy Problem 3: Per-Site Visitor Uniqueness

The ultimate anti fingerprinting challenge in our view is to address a specific user’s uniqueness when visiting a specific website. Here’s a simple example:

Having the locale setting to US/EN for American English may provide ample herd immunity in many cases. But what happens when a user with that setting visits an Icelandic government website or a Korean reading club website? They may find themselves in a very small “herd” on that particular website and combined with just a few more fingerprinting touch points they can be uniquely identified.

Addressing per-site visitor uniqueness is not possible in general by a browser unless it knows what the spread of visitors looks like for individual websites.

Fingerprinting Protections at a High Level

We view cross-site tracking and per-site user recall as privacy problems to be addressed by browsers.

Our approach:
Make the fingerprint unique per website, and generate a new unique fingerprint for every fresh start such as at website data removal.

Our tools:

• Use multi-hop proxies to hide IP addresses and defend against network and geographic position fingerprinting.
• Limit the number of fingerprintable web APIs whenever possible. This could mean altering the APIs, gating them behind user permissions, or not implementing them.
• Inject small amounts of noise in return values of fingerprintable web APIs.

Fingerprinting Protection Details

Safari’s new advanced fingerprinting protections make it difficult for scripts to reliably extract high-entropy data through the use of several web APIs:

1. To make it more difficult to reliably extract details about the user’s configuration, Safari injects noise into various APIs: namely, during 2D canvas and WebGL readback, and when reading AudioBuffer samples using WebAudio.
2. To reduce the overall entropy exposed through other APIs, Safari also overrides the results of certain web APIs related to window or screen metrics to fixed values, such that fingerprinting scripts that call into these APIs for users with different screen or window configurations will get the same results, even if the users’ underlying configurations are different.

2D Canvas and WebGL

Many modern web browsers use a computer’s graphics processing unit (GPU) to accelerate rendering graphics. The Web’s Canvas API (2D Canvas) and WebGL API give a web page the tools it needs for rendering arbitrary images and complex scenes using the GPU, and analyzing the result. These APIs are valuable for the web platform, but they allow the web page to learn unique details about the underlying hardware without asking for consent. With Safari’s advanced fingerprinting protections enabled, Safari applies tiny amounts of noise to pixels on the canvas that have been painted using drawing commands. These modifications reduce the value of a fingerprint when using these APIs without significantly impacting the rendered graphics.

It’s important to emphasize that:

1. This noise injection only happens in regions of the canvas where drawing occurs.
2. The amount of noise injected is extremely small, and (mostly) should not result in observable differences or artifacts.

This strategy helps mitigate many of the compatibility issues that arise from this kind of noise injection, while still maintaining robust fingerprinting mitigations.

In Safari 17.5, we’ve bolstered these protections by additionally injecting noise when reading back data from offscreen canvas in both service workers and shared workers.

Web Audio

Similarly, when reading samples using the WebAudio API — via AudioBuffer.getChannelData() — a tiny amount of noise is applied to each sample to make it very difficult to reliably measure OS differences. In practice, these differences are already extremely minor. Typically due to slight differences in the order of operations when applying FFT or IFFT. As such, a relatively low amount of noise can make it substantially more difficult to obtain a stable fingerprint.

In Safari 17.5, we made audio noise injection more robust in the following ways:

• The injected noise now applies consistently to the same values in a given audio buffer — this means a looping AudioSourceNode that contains a single high-entropy sample can’t be used to average out the injected noise and obtain the original value quickly.
• Instead of using a uniform distribution for the injected noise, we now use normally-distributed noise. The mean of this distribution converges much more slowly on the original value, when compared to the average of the minimum and maximum value in the case of uniformly-distributed noise.
• Rather than using a low, fixed amount of noise (0.1%), we’ve refactored the noise injection mechanism to support arbitrary levels of noise injection. This allows us to easily fine-tune noise injection, such that the magnitude of noise increases when using audio nodes that are known to reveal subtle OS or hardware differences through minute differences in sample values.

This noise injection also activates when using Audio Worklets (e.g. AudioWorkletNode) to read back audio samples.

Screen/Window Metrics

Lastly, for various web APIs that currently directly expose window and screen-related metrics, Safari takes a different approach: instead of the noise-injection-based mitigations described above, entropy is reduced by fixing the results to either hard-coded values, or values that match other APIs.

• screen.width / screen.height: The screen size is fixed to the values of innerWidth and innerHeight.
• screenX / screenY: The screen position is fixed to (0, 0).
• outerWidth / outerHeight: Like screen size, these values are fixed to innerWidth and innerHeight.

These mitigations also apply when using media queries to indirectly observe the screen size.

Don’t Add Fingerprintable APIs to the Web, Like The Topics API

We have worked for many years with the standards community on improving user privacy of the web platform. There are existing web APIs that are fingerprintable, such as Canvas, and reining in their fingerprintability is a long journey. Especially since we want to ensure existing websites can continue to work well.

It is key for the future privacy of the web to not compound the fingerprinting problem with new, fingerprintable APIs. There are cases where the tradeoff tells us that a rich web experience or enhanced accessibility motivates some level of fingerprintability. But in general, our position is that we should progress the web without increasing fingerprintability.

A recent example where we opposed a new proposal is the Topics API which is now shipping in the Chrome browser. We provided extensive critical feedback as part of the standards process and we’d like to highlight a few pieces here.

The Topics API in a Nutshell

From the proposal:

// document.browsingTopics() returns an array of up to three topic objects in random order.
const topics = await document.browsingTopics();

Any JavaScript can call this function on a webpage. Yes, that includes tracker scripts, advertising scripts, and data broker scripts.

The topics come from a predefined list of hundreds of topics. It’s not the user who picks from these topics, but instead Chrome will record the user’s browsing history over time and deduce interests from it. The user doesn’t get told upfront which topics Chrome has tagged them with or which topics it exposes to which parties. It all happens in the background and by default.

The intent of the API is to help advertisers target users with ads based on each user’s interests even though the current website does not necessarily imply that they have those interests.

The Fingerprinting Problem With the Topics API

A new research paper by Yohan Beugin and Patrick McDaniel from University of Wisconsin-Madison goes into detail on Chrome’s actual implementation of the Topics API.

The authors use large scale real user browsing data (voluntarily donated) to show both how the 5% noise supposed to provide plausible deniability for users can be defeated, and how the Topics API can be used to fingerprint and re-identify users.

“We conclude that an important part of the users from this real dataset are re-identified across websites through only the observations of their topics of interest in our experiment. Thus, the real users from our dataset can be fingerprinted through the Topics API. Moreover, as can be seen, the information leakage and so, privacy violation worsen over time as more users are uniquely re-identified.” —Beugin and McDaniel, University of Wisconsin-Madison

The paper was published at the 2024 IEEE Security and Privacy Workshops (SPW) in May.

Further Privacy Problems With the Topics API

Re-identifying and tracking users is not the only privacy problem with the Topics API. There is also the profiling of users’ cross-site activity. Here’s an example using topics on Chrome’s predefined list.

Imagine in May 2024 you go to news.example where you are a subscriber and have provided your email address. Embedded on the website, dataBroker.example. The data broker has gleaned your email address from the login form and calls the Topics API to learn that you currently have these interests:

• Flowers
• Event & Studio Photography
• Luxury Travel

In May 2026 you go to news.example where dataBroker.example calls the Topics API and is told that you now have these interests:

• Children’s Clothing
• Family Travel
• Toys

Finally, in May 2029 you go to news.example where dataBroker.example calls the Topics API and is told that you have these interests:

• Legal Services
• Furnished Rentals
• Child Care

You haven’t told any website with access to your email address anything that’s been going on in your family life. But the data broker has been able to read your shifting interests and store them in their permanent profile of you — while you were reading the news.

Now imagine what advanced machine learning and artificial intelligence can deduce about you based on various combinations of interest signals. What patterns will emerge when data brokers and trackers can compare and contrast across large portions of the population? Remember that they can combine the output of the Topics API with any other data points they have available, and it’s the analysis of all of it together that feeds the algorithms that try to draw conclusions about you.

We think the web should not expose such information across websites and we don’t think the browser, i.e. the user agent, should facilitate any such data collection or use.

Privacy Enhancements in Both Browsing Modes

Our defenses against cloaked third-party IP addresses and our partitioning of SessionStorage and blob URLs are enabled by default in both regular browsing and Private Browsing. Here’s how those protections work.

Defending Against Cloaked First Party IP Addresses

In 2020, Intelligent Tracking Prevention (ITP) gained the ability to cap the expiry of cookies set in third-party CNAME-cloaked HTTP responses to 7 days.

This defense did not mitigate cases where IP aliasing is used to cloak third party requests under first party subdomains. ITP now also applies a 7-day cap to the expiry of cookies in responses from cloaked third-party IP addresses. Detection of third-party IP addresses is heuristic, and may change in the future. Currently, two IP addresses are considered different parties if any of the following criteria are met:

1. One IP address is IPv4, while the other is IPv6.
2. If both addresses are IPv4, the length of the common subnet mask is less than 16 bits (half of the full address length).
3. If both addresses are IPv6, the length of the common subnet mask is less than 64 bits (also half of the full address length).

Partitioned SessionStorage and Blob URLs

Websites have many options for how they store information over longer time periods. Session Storage is a storage area in Safari that is scoped to the current tab. When a tab in Safari is closed, all of the session storage associated with it is destroyed. Beginning in Safari 16.1 cross-site Session Storage is partitioned by first-party web site.

Similarly, Blobs are a storage type that allow websites to store raw, file-like data in the browser. A blob can hold almost anything, from simple text to something larger and more complex like a video file. A unique URL can be created for a blob, and that URL can be used to gain access to the associated blob, as long as the blob still exists. These URLs are often referred to as Blob URLs, and a Blob URL’s lifetime is scoped to the document that creates it. Beginning in Safari 17.2, cross-site Blob URLs are partitioned by first-party web site, and first-party Blob URLs are not usable by third parties.

Setting a New Industry Standard

The additional privacy protections of Private Browsing in Safari 17.0, Safari 17.2 and Safari 17.5 set a new bar for user protection. We’re excited for all Safari users and the web itself to benefit from this work!

Feedback

We love hearing from you! To share your thoughts on Private Browsing 2.0, find John Wilander on Mastodon at @wilander@mastodon.social or send a reply on X to @webkit. You can also follow WebKit on LinkedIn. If you run into any issues, we welcome your feedback on Safari UI (learn more about filing Feedback), or your WebKit bug report about web technologies or Web Inspector.