Safari Technology Preview 241: New Features and Bug Fixes Explained

Apple has released Safari Technology Preview 241, bringing a host of improvements to web developers and users. This latest beta version of Safari includes enhanced CSS capabilities, significant accessibility fixes, and several resolved issues that improve rendering and performance. Available for macOS Tahoe and macOS Sequoia, the update can be installed via System Settings under General → Software Update. Below, we break down the key changes into frequently asked questions.

What major CSS features were added in this release?

Safari Technology Preview 241 introduces two notable CSS additions. First, support for the stretch keyword in box sizing properties has been added, allowing elements to stretch to fill their containing block in the relevant dimension—helping to build flexible layouts more intuitively. Second, CSS scroll anchoring now has stable support. Scroll anchoring prevents unexpected page jumps when content above the viewport loads or changes, keeping the user’s scroll position stable. This feature is especially useful for pages with dynamic content, such as social media feeds or news articles, where new items might otherwise push the user down the page.

Safari Technology Preview 241: New Features and Bug Fixes Explained — Source: webkit.org

What accessibility issues were resolved in this release?

Several accessibility improvements address common challenges for users relying on assistive technologies. One fix ensures that calling speechSynthesis.cancel() no longer removes utterances queued by subsequent speechSynthesis.speak() calls, preventing synthetic speech from being interrupted prematurely. Another update corrects the computation of bounding boxes for MathML table rows and cells, which improves screen reader output for mathematical content. Additionally, comboboxes now correctly forward focus to their aria-activedescendant, enabling assistive technologies to interact with list items inside a combobox. Finally, the aria-owns attribute is now properly respected when computing accessible names from element content, enhancing the clarity of custom interactive controls.

What animation bug was fixed in this update?

Developers will appreciate the resolution of a specific animation issue: animation-fill-mode now correctly applies viewport-based units after the viewport is resized. Previously, when a user resized the browser window, elements using animation-fill-mode with values like vw or vh could fail to update their computed style, causing visual artifacts. This fix ensures that animations behave consistently across responsive layouts, making previewing and debugging animated interfaces more reliable.

What other CSS rendering problems were fixed?

This release addresses a wide array of rendering quirks. For instance, the line separator U+2028 is now rendered as a forced line break per the CSS specification. On macOS, outline-offset is no longer inflated when outline: auto is used, aligning with other platforms. Font-family serialization has been improved to preserve quotes around family names that match CSS-wide keywords or generic families, reducing font mismatch errors. Moreover, the browser no longer downloads a font if no characters in the document fall within its unicode-range, saving bandwidth. Other fixes include correct shrinking of flex items with percentage-height images, proper handling of View Transition snapshots in non-sRGB color spaces, and improved performance for contain: layout when siblings create their own formatting context. Additionally, underlines are no longer split when a ruby base is expanded, and changing color-scheme now repaints the background of composited iframes.

What specific popover and color issues were resolved?

Two particularly notable fixes involve popovers and color handling. Nested children of a popover element now render correctly when using position: absolute, which previously caused them to disappear. Additionally, the color: initial value now resolves to the correct color in dark appearance mode, preventing unexpected white-on-white or black-on-black text. A regression where media queries could fail to resolve under certain conditions has also been addressed. These changes improve the reliability of modern UI patterns like tooltips, dropdowns, and responsive designs.

How do I install or update Safari Technology Preview 241?

If you already have Safari Technology Preview installed on your Mac running macOS Tahoe or macOS Sequoia, you can update it directly through System Settings. Navigate to General → Software Update, and the latest version (Release 241) will appear as an available update. For a fresh installation, download the package from Apple’s developer portal. This release includes WebKit changes from build 309287@main to 310186@main, bringing the latest engine improvements to your testing environment.

Tags: