Safari Technology Preview Release 142 is now available for download for macOS Big Sur and macOS Monterey. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.

This release covers WebKit revisions 289213-290223.

Note: Tab Groups do not sync in this release.

Web Inspector

• Elements Tab
  • Added overlay for visualizing CSS Flexbox container layouts (r290065, r290047, r289416, r289610, r289698, r289757)
  • Added indicators for layout context in element tooltips (r290112)
• Sources Tab
  • Fixed clicking to re-enable a breakpoint clearing automatic continue (r289669)
  • Fixed double-clicking a breakpoint icon to show the edit popover (r289670)

CSS Subgrid

• Enabled subgrid by default (r290111)
• Added accounting for subgrid margin, border, and padding when sizing (r290096)
• Added support for parsing subgrid in grid-template-columns and grid-template-row (r289722)
• Changed to copy track sizes from the parent grid into subgrid (r290007)
• Changed to inherit track count from the parent grid for subgridded axes and clamp item placement to that explicit grid (r289986)
• Included subgrid items in the track sizing algorithm of the outer grid (r290077)
• Implemented getComputedStyle for subgrids (r289993)
• Fixed certain scenarios where grid may be empty (r289437)
• Fixed recalculating styles when updating a grid gap value (r289241)

CSS Container Queries

• Enabled CSS Container Queries by default (r290025)
• Added query container tracking so they can be invalidated on size change (r289457)
• Added support for all size features (r289838)
• Added support for full range notation in size queries (r290037)
• Added support for range operators in size queries (r289789)
• Changed size queries on unsupported axis to evaluate to unknown (r289890)
• Implemented container name matching (r289617)
• Implemented full query parser and evaluator (r289742)
• Implemented inline-size containment (r289466)
• Implemented container shorthand serialization (r289886)
• Matched container queries correctly in non-rendered subtrees (r290205

CSS

• Enabled CSS Motion Path by default (r290071)
• Enabled overscroll-behavior by default (r289683)
• Changed transform: perspective(0) to not be considered an identity operation (r289903)
• Changed to return none for the computed style of a mask when there are no mask images (r289377)
• Fixed :focus-visible with a click on radio or checkbox labels (r289521)
• Fixed contain: content in fullscreen (r289686)
• Fixed incorrect absolute position layout when toggling contain (r289527)
• Updated conversion to a color space with a smaller gamut to perform gamut mapping (r289396)
• Updated an element with both -webkit-user-select: all and -webkit-user-drag: element to get a snapshot as when using only -webkit-user-drag: element (r289544)

Web Animations

• Enabled the KeyframeEffect.composite property (r290067)
• Added composite accumulation support for transform properties (r289599)
• Added support for logical properties in JS-originated animations (r289216)
• Aligned animations with different, but compatible, frameRate values (r290121)
• Allowed setting frameRate as an option passed to Element.animate() (r290123)
• Allowed setting frameRate as an option passed to document.timeline.animate() (r290125)
• Changed to properly handle interpolation of non-invertible matrices (r289862)
• Changed to use the animation frameRate during animation resolution and scheduling (r290003)
• Changed Animation.commitStyles