Safari Technology Preview 241: Accessibility, CSS, and Animation Enhancements

Introduction

Safari Technology Preview Release 241 is now available for download for macOS Tahoe and macOS Sequoia. If you already have Safari Technology Preview installed, you can update it in System Settings under General → Software Update. This release includes WebKit changes from 309287@main to 310186@main, bringing a host of bug fixes and new features to improve web development and user experience.

Safari Technology Preview 241: Accessibility, CSS, and Animation Enhancements — Source: webkit.org

Accessibility Improvements

This update resolves several accessibility issues, enhancing the experience for users relying on assistive technologies. Key fixes include:

Speech synthesis: Fixed an issue where calling speechSynthesis.cancel() incorrectly removed utterances queued by subsequent speechSynthesis.speak() calls.
MathML bounding boxes: Incorrect bounding boxes were computed for MathML table rows and cells, now corrected.
Combobox focus: Comboboxes no longer fail to forward focus to their aria-activedescendant, ensuring assistive technologies can interact with list items.
ARIA naming: The aria-owns attribute is now properly respected when computing the accessible name from element content.

Animation Fixes

A critical issue in animations has been resolved:

Viewport units in animation-fill-mode: The animation-fill-mode property now correctly applies viewport-based units after the viewport is resized, preventing visual glitches.

CSS Enhancements and Bug Fixes

This release introduces new CSS features and addresses numerous bugs, making styling more predictable and performant.

New Features

Stretch keyword in box sizing: Added support for the stretch keyword in box sizing properties, offering more flexible layout options.
CSS scroll anchoring: Stable support for CSS scroll anchoring is now included, preventing unexpected page jumps when content loads above the user’s viewport.

Resolved Issues

Line separator rendering: U+2028 LINE SEPARATOR is now rendered as a forced line break per the CSS specification.
Outline offset inflation: Fixed an issue where outline-offset was inflated for outline: auto on macOS.
Font-family serialization: Font-family serialization now preserves quotes around family names that match CSS-wide keywords or generic families.
Unnecessary font downloads: A font is no longer downloaded if no characters in the document fall within its unicode-range.
Flex item with percentage-height image: Fixed an issue where a flex item containing a percentage-height image did not shrink correctly around the image.
View Transition snapshots: View Transition snapshots were incorrectly stored in sRGB, causing rendering issues with non-sRGB colors—now fixed.
Performance with contain: layout: Addressed a performance issue where contain: layout caused significantly slower forced layouts when all siblings created their own formatting context.
Underlines in ruby text: Underlines are no longer split when a ruby base is expanded due to long ruby text.
Color-scheme repaint: Changing color-scheme now correctly repaints the background of composited iframes.
Popover positioning: Nested children of a popover element now render correctly when using position: absolute.
Initial color in dark mode: color: initial now resolves to the correct color in dark appearance mode.
Display: contents anchor scope: An element with display: contents now establishes an anchor scope when using anchor-scope.
Media query regression: Fixed a regression where media queries could fail to resolve correctly.

Conclusion

Safari Technology Preview 241 continues Apple’s commitment to refining web standards and improving developer tooling. With these updates, web developers can expect smoother animations, more accessible interfaces, and robust CSS handling. Download or update today to test these changes in your projects.