Safari Technology Preview 241: Key Updates and Fixes Explained

Welcome to our Q&A breakdown of the Safari Technology Preview 241 release. This update brings a host of improvements and bug fixes, especially for accessibility, animations, and CSS. If you're curious about the most impactful changes and how they affect your browsing experience, you've come to the right place. Let's dive into the details through a series of questions covering the major highlights.

What accessibility issues were resolved in this release?

Safari Technology Preview 241 addresses several accessibility bugs that enhance assistive technology interactions. First, a fix ensures that calling speechSynthesis.cancel() no longer removes utterances queued by subsequent speechSynthesis.speak() calls, improving voice output reliability. Second, incorrect bounding box calculations for MathML table rows and cells have been corrected, aiding screen readers in properly navigating mathematical content. Third, comboboxes now correctly forward focus to their aria-activedescendant, allowing assistive technologies to interact with list items seamlessly. Last, the aria-owns attribute is now respected when computing accessible names from element content, ensuring more accurate label identification.

Safari Technology Preview 241: Key Updates and Fixes Explained — Source: webkit.org

How does the animation-fill-mode fix work after viewport resizing?

In earlier versions, the animation-fill-mode property did not correctly apply viewport-based units (like vw or vh) after the viewport was resized. This meant that animations relying on those units would not fill their final state properly when the window changed size. With this fix, the browser now recalculates the fill state based on the new viewport dimensions, ensuring that animated elements end up in the expected position and style even after resizing. This improvement is particularly beneficial for responsive designs where viewport changes are common.

What new CSS features have been added?

Two notable CSS features debut in this release. First, support for the stretch keyword in box sizing properties (like box-sizing) has been added. This keyword allows elements to stretch to fill available space in a more intuitive way, aligning with recent CSS specifications. Second, stable support for CSS scroll anchoring has been implemented. Scroll anchoring prevents unexpected page jumps when content above the viewport changes (e.g., ads loading or images resizing). It automatically adjusts the scroll position to keep the user's focus stable, improving readability and user experience. Both features are now ready for widespread use in web development.

How were CSS rendering and performance issues addressed?

Multiple CSS bugs and performance bottlenecks were fixed. Key corrections include: proper rendering of U+2028 LINE SEPARATOR as a forced line break per spec; inflated outline-offset for outline: auto on macOS now fixed; font-family serialization now preserves quotes around names that match CSS-wide keywords or generic families; fonts are no longer downloaded if no document characters fall within their unicode-range; flex items containing percentage-height images shrink correctly; View Transition snapshots now properly handle non-sRGB colors; contain: layout no longer causes significant slowdowns when all siblings create their own formatting context; underlines are no longer split when a ruby base expands due to long text; changing color-scheme now repaints composited iframes; nested popover children with position: absolute render correctly; color: initial resolves correctly in dark appearance mode; elements with display: contents now establish anchor scopes; and a regression in media query resolution has been resolved. These fixes collectively improve both visual fidelity and page performance.

What does the addition of stable CSS scroll anchoring mean for web developers?

Stable CSS scroll anchoring (enabled by default) means developers no longer need to rely on JavaScript workarounds to prevent viewport jumps. The browser automatically maintains the user's scroll position when content shifts due to DOM mutations, such as images loading, fonts rendering, or scripts injecting elements. This leads to a smoother browsing experience, especially on content-heavy pages or single-page applications. Developers can test this feature by noting that scroll anchoring kicks in for scroll containers that do not explicitly opt out via overflow-anchor: none. This addition aligns Safari with other modern browsers and simplifies responsive design.

Were any issues with MathML and combobox accessibility fixed?

Yes, two specific accessibility fixes target MathML and comboboxes. For MathML, incorrect bounding boxes for table rows and cells were corrected. This ensures screen readers and other assistive technologies can properly interpret the structure and relationships within mathematical tables, which is crucial for visually impaired users studying STEM content. For comboboxes, focus was not being forwarded to the aria-activedescendant element, preventing assistive technologies from interacting with available list items. Now, when a combobox is opened, the active descendant receives focus programmatically, allowing users of screen readers to navigate options via standard input methods. These changes improve conformance with WAI-ARIA specifications and enhance real-world usability.

How does the font-family serialization fix benefit web developers?

When a CSS font-family value includes a family name that matches a CSS-wide keyword (like initial, inherit, unset, or revert) or a generic family (such as serif, sans-serif, monospace, etc.), the browser previously omitted the required quotes during serialization or computed style output. This caused the font to be misinterpreted or ignored. The fix ensures that these names are properly quoted, preserving the original intent. Developers will now see accurate font stacks when using getComputedStyle() or when parsing inline styles, leading to fewer font fallback surprises and more predictable rendering across different environments.

What performance improvements are included in this update?

One significant performance fix addresses the contain: layout CSS property. When an element has contain: layout and all its siblings also create their own formatting context (e.g., via floats, flex, or grid), forced layout recalculations became significantly slower. This regression is now resolved, meaning pages with many independent layout contexts will perform better, especially during dynamic updates. Additionally, the fix for incorrect color-scheme repaints in composited iframes reduces unnecessary re-rendering, saving CPU cycles. Overall, these changes contribute to smoother scrolling and faster page interactions, particularly on complex web applications.

Tags: