New WebKit Features in Safari 13

This year’s releases of Safari 13 for macOS Catalina, iPadOS, iOS 13, and watchOS 6 include a tremendous number of WebKit improvements for the web across Apple’s platforms. Of particular note is the number of features that enhance website compatibility to bring a true desktop-class web browsing experience to Safari on iPadOS. This release is also packed with updates for improved privacy, performance, and a host of new tools for web developers.

Here’s a quick look at the new WebKit enhancements available with these releases.

Desktop-class Browsing on iPad

WebKit provides the heart of this new experience with deep, fundamental changes that deliver a great desktop website experience on a touch device. With the exception of iPad mini, Safari on iPad will now send a user-agent string that is identical to Safari on macOS. Beyond just a user-agent change, WebKit added new support for web standards to provide the needed compatibility and quality. That included adding new support for Pointer Events, the Visual Viewport API, and programmatic paste. You can read more details about support for those standards in the sections below. In addition, WebKit added Media Source Extensions support in Safari on iPadOS to improve compatibility with the desktop-variants of streaming video websites.

Beyond foundational new web standards support in WebKit, there are many other refinements for the desktop browsing experience on iPad. Page scaling behaviors have been fine-tuned to prevent horizontal scrolling on wide webpages with responsive design viewport tags. When a webpage is scaled down to fit entirely within the viewport, WebKit will increase the font size of content to ensure text is comfortably legible. WebKit added support for automatic Fast Tap on links and buttons to help make navigating web content feel more responsive. Improved hardware keyboard support adds the ability to scroll with the arrow keys and perform focus navigation. Find on page now works like Safari on desktop, highlighting all of the matching terms on the page with a special highlight for the current selection. The behavior of editing callout menus for text selections was polished to avoid overlapping in page controls provided by many document editing web applications. Last but not least, Safari includes support for background downloads, as well as background file uploads.

This new experience on iPad means significant changes for web developers to consider for their web technology projects. Safari on iPad is a chameleon; it can respond to servers as either a desktop device or a mobile device under different circumstances. Most of the time, Safari on iPad presents a macOS user-agent when loading a webpage. If Safari is moved into a one-third size when multitasking the desktop site will be scaled to fit the one-third size without reloading and losing your place. But loading or reloading a webpage while Safari is in one-third size will provide an iOS user-agent since the mobile layout is better suited to the smaller viewport.

Now more than ever before, web developers need to take great care in providing a single responsive web design that uses feature detection instead of relying on separate desktop and mobile sites dependent on the user-agent. Developers should be sure to test their desktop website experience on an iPad to ensure it works well for users.

Pointer Events

WebKit added support for Pointer Events to provide DOM events for generic, hardware-agnostic pointer input such as those generated by a mouse, touch, or stylus. It adds a layer of abstraction that makes it easier for web developers to handle a variety of input devices. Similar to mouse events, pointer events include coordinates, a target element, button states, but they also supports additional properties related to other forms of input, such as pressure, tilt, and more.

See the Pointer Events specification for more information.

Visual Viewport API

WebKit added support for the Visual Viewport API, that allows webpages to detect the part of the page that is visible to the user, taking zooming and the onscreen keyboard into account. Developers can use this API to move content out of the way of the onscreen keyboard. This is useful for a floating overlay, a custom completion list popup, or a custom-drawn caret in a custom editing area.

See the Visual Viewport API specifications for more information.

Programmatic Paste

WebKit also brings new support for programmatic paste in Safari for iOS and iPadOS with document.execCommand('paste'). When a page triggers programmatic paste within scope of a user gesture, a callout bar with the option to paste is provided. When the call out is tapped it will grant access to the clipboard and proceed with the paste. For paste operations where the contents of the clipboard share the same origin as the page triggering the programmatic paste, WebKit allows the paste immediately with no callout bar.

Learn more in the Document.execCommand() reference on MDN.

Accelerated Scrolling on iOS and iPadOS

Accelerated scrolling the main frame has always been available with WebKit on iOS. In addition, developers could use a CSS property called -webkit-overflow-scrolling to opt-in to fast scrolling for overflow scroll. None of that is necessary with iPadOS and iOS 13. Subframes are no longer extended to the size of their contents and are now scrollable, and overflow: scroll; and iframe always get accelerated scrolling. Fast scrolling emulation libraries are no longer needed and -webkit-overflow-scrolling: touch; is a no-op on iPad. On iPhone, it still has the side-effect of creating a CSS stacking context on scrollable elements. Developers will want to test their content to see how hardware accelerated scrolling everywhere affects it and remove unnecessary workarounds.

Performance Improvements

This release brings performance improvements that reduced the initial rendering time for webpages on iOS, and reduced load time up to 50% for webpages on watchOS. Reduced memory use by JavaScript in Safari, web views, and non-web clients that use JSContext. WebKit also achieved better graphics rendering performance showing up to a 10% improvement in the MotionMark graphics performance benchmark score.

Intelligent Tracking Prevention

The latest update to Intelligent Tracking Prevention enhances prevention of cross-site tracking through the abuse of link-decoration. The updates in ITP 2.3 as part of this release of Safari add new countermeasures. In addition to the 24-hour cookie expiry from ITP 2.2, non-cookie website data like LocalStorage will be marked for deletion if the page is navigated to from a classified domain to a landing URL with a query string or fragment identifier. Deletion happens after seven days of Safari use without user interaction on the website. Beyond link decoration, Intelligent Tracking Prevention will also downgrade document.referrer to the referrer’s eTLD+1 if the referrer has link decoration when the user was navigated from a classified domain.

For details on Intelligent Tracking Prevention updates, see the “Intelligent Tracking Prevention 2.3” blog post and our collection of other privacy related blog posts.

FIDO2-compliant USB Security Keys

Safari 13 on macOS has support for FIDO2-compliant USB security keys through the Web Authentication standard. Security keys can hold device bounded public key credentials that are associated with specific internet accounts. This allows users to add an additional layer of protection to their accounts by utilizing security keys as a second factor to authenticate. Not just that, but Web Authentication also prevents phishing. Since user agents are arbitrating the entire authentication process and the public key credentials can never leave their bounded security keys, it’s impossible for phishing sites to get users’ targeted credentials.

More Privacy and Security Improvements

Building on the strength of privacy and security in WebKit, users will have additional protections with sandbox hardening on iOS and macOS, and navigation protection from third-party iframes.

Developers will now need to call DeviceMotionEvent.requestPermission() or DeviceOrientationEvent.requestPermission() to prompt the user for permission before getting access to the events, on in Safari or Safari View Controller on iOS and iPadOS.

Apple Pay in WKWebView

In iOS 13, webpages loaded in WKWebView can now accept Apple Pay. In order to protect the security of Apple Pay transactions in WKWebView, Apple Pay cannot be used alongside of script injection APIs such as WKUserScript or evaluateJavaScript(_:completionHandler:).

If these APIs are invoked before a webpage uses Apple Pay, Apple Pay will be disabled. If a webpage uses Apple Pay before evaluateJavaScript(_:completionHandler:) is invoked, the completion handler will be called with a non-nil NSError. These restrictions are reset every time the top frame is navigated.

Media Improvements

Media improvements in WebKit improve both compatibility and capability for developers. Support for the decodingInfo() method of the Media Capabilities API allows developers to check for supported codecs, efficiently supported codecs, and optional codec features including new alpha transparency. WebKit now supports transparency in video with an alpha channel that works for all supported video formats.

In Safari on macOS, WebKit added the ability for users to share their screen with others natively, using web technologies, without the need for any plug-ins. SFSafariViewController gained WebRTC support for the navigator.mediaDevices property of the Media and Streams API.

Dark Mode for iOS and iPadOS

Last year WebKit added dark mode for the web to Safari on macOS Mojave. This year, WebKit brings the same support to style web content that matches the system appearance in Safari on iOS and iPadOS.

Learn how it works and how to add support to your web content in the blog posts on “Dark Mode Support in WebKit” and “Dark Mode in Web Inspector”.

Improved Home Screen Web Apps on iOS and iPadOS

Support for websites saved to the home screen have been polished to work more like native apps. The changes focused on better multitasking support, improved login flow to work in-line without switching to Safari, support for Apple Pay, and improved reliability for remote Web Inspector.

Safari WebDriver for iOS

Support for Safari WebDriver on iOS 13. Control via WebDriver is exposed to developers via the /usr/bin/safaridriver executable, which hosts a driver that handles REST API requests sent by WebDriver test clients. In order to run WebDriver tests on an iOS device, it must be plugged into a macOS host that has a new enough version of safaridriver. Support for hosting iOS-based WebDriver sessions is available in safaridriver included with Safari 13 and later. Older versions of safaridriver do not support iOS WebDriver sessions.

If you’ve never used safaridriver on macOS before, you’ll first need to run safaridriver --enable and authenticate as an administrator. Then, you’ll need to enable Remote Automation on every device that you intend to use for WebDriver. To do this, toggle the setting in the Settings app under Safari → Advanced → Remote Automation.

With the introduction of native WebDriver support in Safari on iOS 13, it’s now possible to run the same automated tests of desktop-oriented web content on desktop and mobile devices equally. Safari’s support comes with new, exclusive safeguards to simultaneously protect user security and privacy and also help you write more stable and consistent tests. You can try out Safari’s WebDriver support today by installing a beta of macOS Catalina and iOS 13.

You can learn more about iOS support for Safari WebDriver by reading the “WebDriver is Coming to Safari in iOS 13”.

Web Inspector Improvements

Web Inspector adds tools that bring new insights to web content during development. This release also includes many tooling refinements with more capabilities and a better debugging experience. Among the changes, Web Inspector has improved performance for debugging large, complex websites.

A new CPU Usage Timeline is available in the Timelines Tab that provides developers with insight into power efficiency through CPU usage. This helps developers analyze and improve the power efficiency of their web content. The Timelines Tab has also been updated to support importing and exporting of recorded timeline data using a JSON file format. The portability of timeline data makes it possible to share recordings with other developers, or use the data in custom tools.

Read more in the “CPU Timeline in Web Inspector” blog post. For more tips on developing power efficient web content, you can also read the “How Web Content Can Affect Power Usage” blog post.

This release introduces a new Audit Tab to run tests against web content with results that can be easily imported and exported. The Audit Tab includes a built-in accessibility audit for web content and allows developers to create their own audits for custom checks throughout the web content development process.

You can read more in the blog posts for “Audits in Web Inspector” and “Creating Web Inspector Audits” .

When an iOS or iPadOS device with Web Inspector enabled in Safari’s Advanced Settings is connected to a macOS device running Safari, Web Inspector will offer a new Device Settings menu. The Device Settings menu allows overriding developer-related Safari settings such as the User-Agent string when Web Inspector is connected to the device.

Read more about this in the “Changing Page Settings on iOS Using Web Inspector” blog post.

The Elements Tab includes a new Changes sidebar to keep track of CSS changes made in the Styles sidebar, making it easier to capture all of the changes made and re-incorporate them into production code. In the Network Tab, certificates and TLS settings are now available to review in the Security pane of the resources view.

Feedback

These improvements are available to users running watchOS 6, iOS 13, iPadOS, macOS Catalina, macOS Mojave 10.14.6 and macOS High Sierra 10.13.6. These features were also available to web developers with Safari Technology Preview releases. Changes in this release of Safari were included in the following Safari Technology Preview releases: 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89. Download the latest Safari Technology Preview release to stay on the forefront of future web features. You can also use the WebKit Feature Status page to watch for changes to your favorite web platform features.

We love hearing from you. Send a tweet to @webkit or @jonathandavis to share your thoughts on this release, and any features you were hoping for that didn’t make it. If you run into any issues, we welcome your bug reports for Safari, or WebKit bugs for web content issues.