Understanding Safari Technology Preview 241: Key Fixes and Features

Welcome to Safari Technology Preview 241, a developer build that offers a sneak peek into upcoming WebKit changes. Available for macOS Tahoe and macOS Sequoia, existing users can update through System Settings under General → Software Update. This release includes a wealth of improvements, from accessibility corrections to CSS enhancements. Below, we explore the most important updates in a Q&A format.

What are the overall highlights of Safari Technology Preview 241?

This version brings over 100 WebKit revisions (from 309287 to 310186), focusing on refining core web standards. Key areas include accessibility fixes that improve assistive technology support, CSS scroll anchoring to prevent page jumps, and a new stretch keyword for box sizing. Developers will also appreciate resolutions for rendering glitches in popovers, iframes, and MathML. Whether you're testing animations or fine-tuning layouts, this update provides a more stable and standards-compliant environment.

What accessibility issues were resolved in this release?

Four significant bugs were fixed. First, speechSynthesis.cancel() no longer accidentally removes utterances queued by subsequent speechSynthesis.speak() calls, ensuring speech output flows as intended. Second, MathML table rows and cells now compute correct bounding boxes, which is crucial for screen readers. Third, comboboxes properly forward focus to their aria-activedescendant, allowing assistive technologies to interact with list items. Lastly, the accessible name from element content now respects the aria-owns attribute, making more complex ARIA setups work correctly. These changes enhance the browsing experience for users relying on voice control or screen readers.

How does the animation-fill-mode fix benefit web developers?

Previously, when using animation-fill-mode to retain final keyframe styles, viewport-based units (e.g., vh, vw) would not update after resizing the viewport. This caused visual glitches in responsive animations. With the fix at (309406@main), animations now correctly apply viewport-based values throughout the fill period, regardless of viewport changes. Developers can design more fluid, dynamic interfaces—such as hero banners or slideshows—without worrying about layout inconsistencies after a window resize.

What new CSS features are introduced in this update?

Two major additions empower developers. First, the stretch keyword for box sizing properties (like width and height) allows elements to fill the available space without explicit percentages or flex growth. Second, CSS scroll anchoring is now stable, preventing disruptive page jumps when content loads above the user's viewport. This feature, enabled by default, intelligently adjusts the scroll position so that users stay focused on the content they were reading. Both updates reduce the need for JavaScript workarounds and promote cleaner, more maintainable style sheets.

What rendering bugs were fixed that affect layout and typography?

Several subtle yet impactful bugs were addressed. The U+2028 LINE SEPARATOR character now renders as a forced line break per the CSS specification, improving compatibility with text that uses this separator. The outline-offset for outline: auto on macOS is no longer mistakenly inflated, ensuring outlines appear as expected. Additionally, font-family serialization now preserves quotation marks around family names that match CSS-wide keywords (like initial) or generic families (like serif), maintaining correct cascade behavior. These refinements bring Safari closer to specification compliance.

How does the contain:layout performance fix help?

When using contain: layout on elements, Safari previously triggered significantly slower forced layouts if all siblings also created their own formatting context. This could degrade performance in complex grid or flex layouts. The fix at (310173@main) optimizes the containment algorithm, so forced layouts no longer suffer from this overhead. Developers can continue to use contain to isolate rendering without worrying about unintended performance hits, making it safer to apply to components like cards or panels within a larger page.