WebKit Features in Safari 17.1

Today we are pleased to share what new in WebKit for Safari 17.1. It’s now available for iOS 17, iPadOS 17, macOS Sonoma, macOS Ventura and macOS Monterey.

Managed Media Source

Safari 17.1 now brings the new Managed Media Source API to iPhone. Originally shipped in Safari 17.0 for iPad and Mac, Managed Media Source is a power-efficient, low-level toolkit for streaming video.

Watching streaming video is an amazing thing we all do with our devices. But to get the highest-quality video without downloading any unnecessary data and without killing the battery, it takes a complicated stack of technology working under the hood every time you hit the play button. Adaptive bitrate streaming is a technique for switching between media data formats on the fly, depending on the speed of the internet connection and capabilities of the device, even as the conditions change.

For years, many websites have used Media Source Extensions (MSE) to handle adaptive bitrate streaming. It’s a low-level toolkit that gives the web page more control and more responsibility for managing buffering and resolution. But MSE isn’t particularly good at managing buffer levels, network access, and media variant selection. Plus, it uses a lot of power, which can be especially painful on mobile devices with smaller batteries.

Managed Media Source adds the capabilities of MSE, without any of the drawbacks. We were excited to propose ManagedMediaSource to the W3C’s Media Working Group for formal standardization.

Note that support for Managed Media Source is only available when an AirPlay source alternative is present, or remote playback is explicitly disabled.

const videoSource1 = document.createElement('source');
videoSource1. type = 'video/mp4' ;
videoSource1.src = URL.createObjectURL(mediasource);
video.appendChild(videoSource1) ;
const videoSource2 = document.createElement('source');
videoSource2. type = 'application/x-mpegURL' ;
videoSource2.src = "http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8";
video.appendChild(videoSource2);

Learn all about Managed Media Source API by watching Explore media formats for the web at WWDC23.

Safari Extensions updates

Safari 17.1 also adds support for storage.session.setAccessLevel and updated storage.session to be accessed only byTRUSTED_CONTEXTS by default.

Bug Fixes

WebKit for Safari 17.1 provides multiple bug fixes and feature polish.

Accessibility

• Fixed properly exposing the expanded state of <details> elements on iOS. (109684906)
• Fixed exposing column headers of cells within role="row" elements with display: contents to assistive technologies. (115190637)
• Fixed empty accessibility label for role="treeitem" elements with display: contents who have child text starting with a newline. (115226509)

Authentication

• Fixed a bug that could cause authentication through Extensible Enterprise Single Sign-On to hang if the authentication was canceled on the server side. (105809792)

CSS

• Fixed font-size-adjust toggling font sizes for system-ui font. (111709567)
• Fixed counter values to prevent them from overflowing or underflowing. (111743827)
• Fixed auto none support for contain-intrinsic-size. (112479718)

JavaScript

• Fixed a positive look-behind RegExp with alternatives of different minimum lengths. (112952197)

Loading

• Fixed an issue with a workaround to handle cases where websites serve Data URLs with malformed padding. This issue prevented some images in Word documents from failing to display when hosted by Box and Sharepoint. (114573089)

Media

• Fixed fullscreen ready check to remove the hierarchy requirement. (110004138)
• Fixed an issue where HTTP Live Streaming (HLS) videos may be offset and clipped within their video element’s frame. (110467872)
• Fixed videos disappearing when switching from landscape to portrait. (112416568)
• Fixed vertical multiline WebVTT captions getting cut off. (112951878)
• Fixed an issue where AirPods spatial audio quality is degraded after loading sites that request user media in Safari. (113604970)
• Fixed an issue where media will play with sound but no video after pressing the back button in Safari. (113605284)
• Fixed an issue where media of type application/x-mpegURL; codecs="avc1.42E01E" does not play in Safari. (113608345)
• Fixed an issue where a media element backed by MediaSource may not receive the seeked event. (114594559)

Performance

• Fixed a bug that caused poor performance when resuming WebKit-based apps, including causing a black screen or a blurry snapshot of the app’s prior state to be temporarily visible to users. (114795818)

Rendering

• Fixed an issue where scrollbars would sometimes show unexpectedly in fullscreen content. (113605155)
• Fixed a bug that could cause sites to layout improperly in Private Browsing mode. (113607432)
• Fixed handling iframes with display: none. (112494003)

Web API

• Fixed an issue that could trigger a crash when web content uses WebSockets. (75425816)
• Fixed intermittent removal of adoptedStyleSheet CSSStyleSheet instances when assigning an adoptedStyleSheet array. (107768559)
• Fixed: Improved the performance of IntersectionObserver operations during scrolling. (111120491)
• Fixed ElementInternals.setFormValue(<nullish value>) to clear the submission value. (111802198)
• Fixed keyboard scroll not stopping after pressing the down arrow if keyup is default prevented. (112396756) (FB12647732)
• Fixed window.postMessage with OffscreenCanvas with an isolated world message listener. (112618195)
• Fixed a bug that could cause a nested popover element within a shadow DOM to improperly dismiss its ancestor popover. (113604250)

Web Apps

• Fixed handling dismissed notifications on macOS. (113756668)

Web Inspector

• Fixed objects logged to the console with multiple private fields that use the same name. (109215331)
• Fixed: Stopped using Number.prototype.toLocaleString() for numeric console format specifiers. (112170843)

WebGL

• Fixed an issue which would cause unnecessary “WebGL: context lost.” errors after Safari has been moved to the background on iPadOS. (115500744)

Updating

If you are running macOS Ventura or macOS Monterey, you can update Safari by going to Software Update, and clicking “More info”. On macOS Ventura, that’s  > System Settings > General > Software Update > More info. To get Safari 17.1 on your iPhone or iPad, go to Settings > General > Software Update, and tap to update.

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

Feedback

We love hearing from you. To share your thoughts on Safari 17.1, find us on Mastodon at @jensimmons@front-end.social and @jondavis@mastodon.social. Or send a reply on X to @webkit. If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technologies or Web Inspector. Filing issues really does make a difference.

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