Safari Technology Preview 243: Enhanced Accessibility, Animations, and CSS Improvements

Apple has released Safari Technology Preview 243, the latest iteration of its experimental browser designed for developers and early adopters. Available for macOS Tahoe and macOS Sequoia, this update brings a host of fixes and enhancements across accessibility, animations, and CSS. Existing users can update via System Settings under General → Software Update. This release incorporates WebKit changes from 310600@main to 312007@main.

Accessibility

Several resolved issues improve the browsing experience for users relying on assistive technologies like VoiceOver:

• Context menu in iframes: Fixed an issue where the contextmenu event was not triggered for elements inside iframes when accessed via keyboard or assistive actions (e.g., VoiceOver's VO+Shift+M). This ensures that contextual options are available in embedded content.
• Color picker activation: Color picker inputs can now be activated using VoiceOver's press action, resolving a barrier for users who depend on voice commands.
• Aria-hidden invalidation: The invalidation of aria-hidden="true" when focus lands inside the hidden subtree has been fixed, preventing unexpected accessibility tree changes.
• Base <select> elements: VoiceOver support for native <select> elements has been improved, including proper closure of the popover upon selection and corrected accessibility path positioning when CSS transforms are applied.

Animations

Two animation-related fixes enhance visual consistency:

• !important vs. CSS transitions: Resolved an issue where !important declarations did not override CSS animation values when CSS transitions were also running on the same property. This ensures that explicit style rules take precedence as intended.
• Matrix decomposition quaternions: Fixed an error where identity matrix decomposition generated invalid quaternions, which caused incorrect transform animations. This results in smoother and more predictable motion effects.

CSS

New Features

Two new capabilities expand CSS control:

• Contain: style for quote counters: Added support for contain: style applying to CSS quote counters, as specified in CSS Containment Level 2. This allows developers to limit the scope of counter styles, improving performance and predictability.
• Insert keyword for text-autospace: The insert keyword is now supported for the text-autospace property, offering finer control over spacing in mixed-script text.

Resolved Issues

A wide range of CSS bugs have been fixed to improve layout accuracy and performance:

• Flex layout definiteness: Used flex-basis values are now correctly evaluated for definiteness instead of specified values, aligning with the Flexbox specification.
• Positioning in anonymous blocks: Element positioning now works correctly when the containing block is an anonymous block, fixing layout glitches in complex DOM trees.
• Box-shadow on table-row: Box-shadow now renders properly on display: table-row elements, adding visual depth to table rows.
• text-indent with calc() percentages: Percentage components in text-indent with calc() are now correctly treated as zero for intrinsic size contributions, preventing unexpected horizontal shifts.
• fit-content height for out-of-flow: Out-of-flow content with height: fit-content now computes the correct height, avoiding overflow issues.
• Percentage size in flex items (quirks mode): Fixed an issue with percentage size resolution in flex items in quirks mode, ensuring consistent behavior across modes.
• clip-path: inset() border-radius: Clipping paths using clip-path: inset() with border-radius now render accurately at various element and clip-path sizes.
• -webkit-box flexbox emulation in fieldset: Child sizing inside <fieldset> elements using the legacy -webkit-box flexbox emulation has been corrected.
• Performance for :where and :is selectors: Improved performance on pages using :where and :is selectors, speeding up style computation.
• display: table layout with borders: Elements with display: table now have correct layout when borders are present.
• Aspect-ratio squares: Elements with border, position: absolute, and aspect-ratio: 1 are now rendered as perfect squares, fixing a sizing discrepancy.

For more details, refer to the official WebKit blog.