Apple on Thursday released Safari Technology Preview 97, the latest version of their developer preview web browser. The preview version of Apple’s popular browser offers developers and other interested users the ability to try out features that may or may not, debut in future public release versions of Safari.
The new release includes bug fixes and performance improvements for Resize Observer, WebAuthn, Web Animations, Web Inspector, Rendering, Back-Forward Cache, SVG, Clipboard API, CSS, Remote Playback API, Media, JavaScript, Picture-in-Picture Web API, WebAssembly, and Web API.
Release 97
Resize Observer
- Enabled Resize Observer by default
WebAuthn
- Added UI with instructions for authenticating with a security key while authenticating
- Added support for legacy Google NFC Titan security keys
Web Animations
- Enabled Web Animations CSS Integration, a new implementation of CSS Animations and CSS Transitions, by default
- Added support for AnimationEvent.pseudoElement
- Fixed retargeted transitions targeting accelerated properties that do not stop the original transition
- Fixed the easing property for a CSS transition effect
- Fixed the transform property always none for getKeyframes() output of a CSS Animation
- Fixed layout of element children with forwards-filling opacity animation that can be incorrect after removal
- Fixed getKeyframes() to return the right timing function for declarative animations
- Implemented Animation.commitStyles()
Web Inspector
- Elements
- Added support for multiline CSS property values
- Added support for highlighting nodes that match CSS rules with pseudo-selectors
- Added color picker support for P3 color space
- Fixed an issue where copying multiple DOM nodes would only copy the last selected DOM node
- Fixed aqua and fuchsia not being detected as CSS colors
- Outlined sRGB-safe areas on the P3 color picker
- Sources
- Added a context menu item to reveal the local override when a resource is loaded from it
- Added support for matching local overrides based on URL pattern in addition to exact match
- Changed to prefer non-blackboxed scripts when showing a source code location link
- Changed to fire Node Removed breakpoints whenever the DOM node is removed from the main DOM tree, not just when it’s removed from it’s parent
- Fixed “Toggle Visibility” context menu item to work for elements inside a shadow tree
- Made the default content of the Inspector Bootstrap Script a comment that explains how it works
- Moved the “Local Override…” creation item from the Breakpoints section options menu to the Create Resource menu
- Made call frames from blackboxed scripts visually distinct
- Timelines
- Added a marker for when a stop was requested
- Added a timeline that shows information about any recorded CSS animation/transition
- Labeled ResizeObserver callbacks in the JavaScript & Events timeline
- Layers
- Enabled the Layers Tab by default
- Console
- Defaulted to focusing the console prompt if no other content is focused after opening Web Inspector
- Fixed an issue where the saved result value was still being shown after navigating
- Settings
- Enabled line wrapping by default
Rendering
- Fixed image flashing with transform: rotate animation
- Implemented accelerated video-to-texture upload path for ANGLE backend for WebGL
Back-Forward Cache
- Added site-specific back-forward cache quirk to work around an issue on vimeo.com
- Fixed WebAnimation to never prevent entering the back-forward cache
- Fixed PaymentRequest and PaymentResponse to not prevent entering the back-forward cache
- Fixed UserMediaRequest to not prevent entering the back-forward cache
- Made MediaStream and MediaStreamTrack back-forward cache friendly
SVG
- Added the orient property of the interface SVGMarkerElement
- Added percentage support for fill-opacity, stroke-opacity, stop-opacity, and flood-opacity
- Changed properties that take <position> to not accept 3 values
- Disabled SVG shapes should not be hit
- Fixed SVGGeometryElement.getPointAtLength to clamp its argument
- Fixed opacity to always serialize as a number
Clipboard API
- Added some infrastructure to resolve ClipboardItems into pasteboard data for writing
- Added support for Clipboard.readText()
CSS
- Added support for the Q unit
- Changed to not perform range checking for calc() at parse time
- Changed CSS Transitions and CSS Animations properties to treat unit-less 0 as an invalid value for times
- Changed media queries in img sizes attribute to evaluate dynamically
- Fixed CSS grid line name positions after auto repeat with no line names
- Fixed -webkit-font-smoothing: none not antialiasing subsequent elements
- Fixed ::before and ::after elements not filling their grid cell when the container has display: contents
- Fixed calc() serialization to match the specifications
- Implemented the CSS clamp() function
Remote Playback API
- Enabled Remote Playback API by default
- Ensured the MediaRemote callback always called
Media
- Batched multiple EME key requests into one request and response
JavaScript
- Added BigInt support for ++ and —
- Fixed Intl.DateTimeFormat to return resolvedOptions in the correct order
- Optimized Promise runtime functions
- Implement String.prototype.replaceAll
Picture-in-Picture Web API
- Enabled the Picture-in-Picture API by default
- Added support for the :picture-in-picture CSS pseudo-class for video elements in picture-in-picture mode
- Fixed picture-in-picture events to fire when entering or exiting the picture-in-picture mode
WebAssembly
- Created a WebAssembly interpreter
- Support WebAssembly.Global
Web API
- Added fullscreen style support for reddit.com
- Changed the file input to fire an input event before the change event
- Changed hidden framesets to provide default edgeInfo value
- Fixed <input type=”range”>.setAttribute(“value”) to update the value
- Fixed some captcha images rendering as a blank white space
- Fixed content sometimes disappearing for a <video> with controls and clipping
- Fixed a bug where focusing a shadow host which delegates focus will properly skip inner shadow hosts that delegate focus
- Fixed getComputedStyle returning auto for zIndex property even after it has been set on non-positioned elements
- Fixed very slow tile rendering due to event region painting in Google Docs spreadsheets
- Fixed an incorrect association of the URL object with the value port
- Fixed notification permissions not getting remembered for origins without a port
- Fixed VeryHigh priority loads
The update can be downloaded from the Safari Technology Preview website, or if the browser is already installed, it can be updated via the “Update” tab in the Mac App Store. Full release notes for the update are also available on the Safari Technology Preview website.
While the preview is intended for use by developers and advanced users, in order to provide Apple with feedback on the development of the Safari browser, it can be run side-by-side with the release version of Safari. The app doesn’t require a developer account to download and install. For more information, visit the Safari Technology Preview website.