Chrome 104 beta trials Shared Element Transitions, video region capture

The Chromium team has shipped the beta of Chrome 104, with new features including a trial of Shared Element Transitions, bringing easier and more advanced transition animations to the web platform, and the first implementation of video region capture, for broadcasting a cropped region as a video, along with two further new origin trials.

Origin trials are opt-in preview features.

The main use case for Region Capture is video conferencing applications where developers need to broadcast only part of a browser tab to other participants. Region Capture lets developers define a cropTarget based on a container – which currently must be a div or an iFrame – and use it to crop a video track of that tab. 

The first new origin trial is Shared Element Transitions, a CSS and JavaScript feature useful for both single page and multi-page applications. A Shared Element Transition may be an animation between two web pages, or where an element morphs into a full page, or between different UI elements, or for an element on screen entry or exit.

“Most platforms provide easy-to-use primitives that enable developers to build seamless transitions,” says the explainer. “Shared Element Transitions provides developers with the same capability on the web.”

Simple transitions can be specified declaratively in CSS, while more complex transitions will need JavaScript and build on the existing Web Animations API.

Next up is the focusgroup CSS property. This is described here and enabled developers to make keyboard navigation more intuitive, without using JavaScript tricks like setting tabindex to -1 (unfocusable via keyboard). The drive behind this comes from Microsoft, to support custom components in its Fluent UI design system, which is why the origin trial for this is in Edge rather than Chrome. 

A developer demo of the new user opt-out for storing credit card details in the Secure Payment Confirmation API

Third is a user opt out for credit card storage when using the Secure Payment Confirmation API. Developers enable this by passing showOptOut to a PaymentRequest constructor. Why was this not part of the specification from the start? “Traditionally access to the opt-out experience is embedded directly into the Relying Party’s website. However in the case of SPC the Relying Party may not be part of the web content flow, as the authentication may be initiated from a third-party website (e.g., a merchant site),” explains the feature status report.

The stable release of Chrome 104 is scheduled for August 2nd 2022.