Safari Technology Preview 243: Key Changes and Improvements

Apple has released Safari Technology Preview 243, now available for download on macOS Tahoe and macOS Sequoia. Existing users can update via System Settings under General → Software Update. This build incorporates WebKit changes from 310600 to 312007, bringing a host of fixes and new features. Below, we break down the most important updates in accessibility, animations, and CSS.

What Accessibility Issues Were Fixed in Safari Technology Preview 243?

This release addresses several key accessibility glitches. Notably, the contextmenu event now fires correctly for elements inside iframes when triggered via keyboard or assistive tools like VoiceOver's VO+Shift+M. Color picker inputs can now be activated using VoiceOver’s press action—a fix that improves form interaction for users relying on screen readers. Another important correction involves aria-hidden invalidation: when focus moves inside an aria-hidden subtree, the hidden state is now properly recalculated. Additionally, VoiceOver support for basic <select> elements has been enhanced: the popover closes upon selection, and accessibility path positioning adjusts correctly even when CSS transforms are applied.

How Does This Release Improve Animation Behavior?

Two animation-related issues have been resolved. Previously, if both a CSS transition and a CSS animation targeted the same property, !important declarations would not override the animation value as expected. This has been fixed, ensuring proper cascade behavior. Additionally, a bug in identity matrix decomposition caused invalid quaternions, leading to incorrect transform animations (e.g., rotations or scaling). The fix corrects the math so that transform animations now produce the intended visual output.

What New CSS Features Were Added?

Safari Technology Preview 243 introduces two CSS enhancements. First, the contain: style property now correctly applies to CSS quote counters, aligning with the CSS Containment Level 2 specification. This improves layout isolation and performance for components that use generated content with quotes. Second, support for the insert keyword has been added to the text-autospace property, giving authors finer control over inter-character spacing in bidirectional or mixed-script text.

What Notable CSS Bugs Were Resolved?

Several CSS bugs have been squashed. Flex layout now uses the used flex-basis (not the specified value) for definiteness evaluation, fixing sizing inconsistencies. Element positioning was corrected for cases where the containing block is an anonymous block. box-shadow now renders on display: table-row elements. text-indent with calc() containing percentages now treats percentage components as zero for intrinsic size contributions, as per spec. Out-of-flow content with fit-content height now calculates correctly. Percentage size resolution in flex items in quirks mode was fixed. Also, clip-path: inset() border-radius rendering now works at various sizes, -webkit-box flexbox emulation correctly sizes children inside <fieldset>, and performance improved for pages using :where and :is selectors. Layout issues with display: table elements with borders and aspect-ratio: 1 elements with borders and absolute positioning were also resolved.

How Does This Update Affect VoiceOver Support for Select Elements?

VoiceOver interaction with basic <select> elements has been significantly improved in this release. Previously, selecting an option did not always dismiss the popover, leaving users uncertain. Now the popover closes automatically upon making a selection, a more intuitive experience. Furthermore, when CSS transforms (like scaling or rotation) are applied to the page, the accessibility path (the position reported to assistive technology) now correctly reflects the element’s visual location. This ensures that VoiceOver users can navigate and interact with <select> controls accurately, regardless of visual transformations.

What Improvements Were Made to Flex Layout and Performance?

This release fine-tunes flex layout behavior and boosts CSS selector performance. The definiteness evaluation for flex items now uses the used flex-basis value, preventing sizing mismatches especially when flex-basis is set to auto or percentage. A fix for percentage size resolution in flex items operating in quirks mode further stabilizes layout across different rendering contexts. On the performance side, pages that rely heavily on :where and :is pseudo-classes will see faster style recalculations. These selectors often appear in complex component libraries; the optimization reduces computation overhead, leading to smoother interaction and rendering.