10 Essential Updates in Safari Technology Preview 241

Apple has rolled out Safari Technology Preview 241, bringing a suite of refinements and fixes to macOS Tahoe and Sequoia. This update sharpens the browsing experience with improved accessibility, smoother animations, and more robust CSS handling. Whether you're a developer or an early adopter, these changes are worth exploring. Below, we break down the ten most impactful updates you need to know.

1. Accessibility Fixes: Smarter Speech, MathML, and Comboboxes

This release tackles several accessibility bugs. A resolved issue ensures that calling speechSynthesis.cancel() no longer removes utterances queued by subsequent speechSynthesis.speak() calls, making speech interactions more predictable. MathML tables now compute correct bounding boxes for rows and cells, improving screen reader accuracy. Comboboxes finally forward focus to their aria-activedescendant, letting assistive technologies properly interact with list items. Additionally, aria-owns is now respected when computing accessible names from element content, enhancing the semantic richness of web pages for users with disabilities.

2. Animation Smoothing: Viewport-Responsive Fills

An annoying flicker issue with animation-fill-mode has been fixed. Previously, after resizing the viewport, viewport-based units (like vw or vh) weren't correctly applied to the fill state. This caused animations to snap or misalign. Now, animations using these units remain consistent and visually smooth regardless of window size changes, a boon for responsive design that relies on CSS animations.

3. New CSS Stretch Keyword for Box Sizing

CSS box sizing properties now support the stretch keyword, offering a new way to size elements. This keyword lets an element stretch to fill its containing block in the relevant dimension, similar to how width: 100% works but with more nuanced behavior. It's a subtle addition that enhances layout flexibility, especially for modern CSS grid and flexbox designs where developers want elements to naturally expand without explicit percentage values.

4. Stable CSS Scroll Anchoring

Scroll anchoring, a feature that prevents page jumps when content loads above the viewport, is now stable. Users won't experience jarring scroll disruptions when images or ads load dynamically. This feature had been experimental, but with release 241 it's ready for production use. Developers can rely on it without vendor prefixes, making web pages feel more polished and professional.

5. U+2028 Line Separator Renders as Expectecial Line Break

The Unicode character U+2028 (LINE SEPARATOR) now renders as a forced line break per the CSS specification. Previously, it was treated as whitespace or ignored, causing formatting discrepancies in text that uses this character. This fix aligns Safari with other modern browsers, ensuring consistent display of line breaks in preformatted text or dynamically generated content.

6. Outline-Offset Inflation Correect for outline: auto

When using outline: auto on macOS, the outline-offset property was incorrectly inflated, leading to oversized outlines around focused elements. This issue has been resolved, giving designers precise control over outline spacing. This is especially important for accessibility focus indicators, where a properly sized outline improves keyboard navigation without cluttering the UI.

7. Font Family Serialization Preserves Quotations

Font-family serialization now correctly preserves quotes around family names that match CSS-wide keywords or generic families (such as 'initial' or 'serif'). Previously, when such names were used, the browser would drop the quotes, potentially breaking font loading or cascade. This fix ensures that custom font names are reliably transmitted in stylesheets and DOM APIs.

8. Optimized Font Downloads: No More Unnecessary Requests

Web fonts with a limited Unicode range often triggered downloads even when no characters in the document fell within that range. This wasted bandwidth and slowed page loads. Safari 241 fixes this by checking the document's content before initiating font downloads. Sites using icon fonts or fonts with narrow coverage will see performance gains, especially with multiple font faces.

9. Flex Items with Percentage-Height Images Shrink Correctly

A bug where a flex item containing an image with a percentage height didn't shrink properly has been fixed. The image would cause the flex item to stay larger than intended, breaking layouts that rely on flex shrinking. Now, percentage-height images respect the flex container's constraints, making responsive image galleries and complex layouts more predictable.

10. View Transitions Preserve Non-sRGB Colors

View Transition snapshots were previously stored in sRGB even when the source content used wider color spaces (like Display P3). This caused color shifts and banding during transitions. With this fix, snapshots retain their original color profile, ensuring smooth and accurate animations between pages or DOM states, especially on devices with wide-gamut displays.

Additional CSS Resolutions

Beyond the highlights, release 241 addresses several other CSS issues: color-scheme changes now repaint composited iframes; nested children of popover elements render correctly with position: absolute; color: initial no longer resolves to the wrong color in dark mode; elements with display: contents establish proper anchor scope; and a regression in media query resolution has been fixed. These refinements collectively enhance the consistency and reliability of web rendering in Safari.

Safari Technology Preview 241 is available for download via System Settings under General → Software Update. If you already have it installed, simply check for updates. This release builds on the WebKit changes between 309287@main and 310186@main, bringing the browser closer to a polished final version. Dive in, test these fixes, and enjoy a smoother browsing experience.