10 Key Updates in Safari Technology Preview 243 You Should Know
Apple has just released Safari Technology Preview 243, bringing a fresh wave of refinements for developers and power users on macOS Tahoe and Sequoia. If you already have the preview installed, head to System Settings > General > Software Update to grab it. This build packs WebKit changes from revision 310600@main through 312007@main, focusing on accessibility, animation reliability, and CSS precision. Below, we break down ten essential fixes and features that deserve your attention.
1. Context Menu Events Now Work Inside iframes for Assistive Tech
Earlier, keyboard users and assistive technologies like VoiceOver couldn’t trigger the contextmenu event within iframes. That meant critical interactions—like right-click menus—were inaccessible. This update patches the issue by ensuring the event fires correctly when activated via keyboard shortcuts or VoiceOver’s VO+Shift+M command. Perfect for web apps that rely on custom context menus inside embedded content.
2. Color Picker Inputs Now Respond to VoiceOver’s Press Action
Color picker fields are a staple of forms, but they were a black hole for VoiceOver users—the press action simply didn’t activate them. Release 243 resolves this, letting users open the color picker dialog through standard accessibility commands. A small change with a big impact on form usability.
3. aria-hidden Invalidation Fixed When Focus Lands Inside
Setting aria-hidden="true" should hide content from assistive technology, but a bug caused it to break when focus moved inside the hidden subtree. This fix ensures that aria-hidden remains valid even when focus temporarily lands within, preventing confusing double‑exposure of hidden elements to screen readers.
4. Base Select Elements Get Full VoiceOver Support
Standard <select> dropdowns now play nicely with VoiceOver. Two key issues were squashed: the popover closes reliably after a selection, and the accessibility path correctly accounts for CSS transforms. This means no more phantom dropdowns or misplaced focus indicators when applying visual effects.
5. !important Declarations Now Override CSS Animations Alongside Transitions
If you ever used !important on a property while both a CSS animation and transition ran on the same element, the animation values would stubbornly win. That’s fixed now—!important takes precedence as expected, giving developers precise control over animated styles.
6. Identity Matrix Decomposition No Longer Produces Invalid Quaternions
Animations relying on matrix transformations sometimes broke because the identity matrix generated invalid quaternions, leading to warped or incorrect results. The corrected decomposition ensures smooth and mathematically sound transform animations, especially when combining scale, rotation, and translation.
7. CSS Containment: contain: style Now Applies to Quote Counters
Per the CSS Containment Level 2 spec, contain: style now scopes CSS quote counters (like those used for automatic numbering). This lets developers isolate sections of a document without cross‑contamination of counter values—useful for reusable components or print‑style layouts.
8. New insert Keyword for the text-autospace Property
The text-autospace property gains an insert keyword, allowing finer control over spacing between characters from different scripts (e.g., CJK and Latin). This addition helps typography within multilingual content appear more natural without manual hackery.
9. Flex Layout Now Uses Used flex-basis for Definiteness
A subtle but impactful fix: Flex container sizing now considers the used flex-basis rather than the specified value when determining whether an item is definite. This aligns with the spec and prevents unexpected sizing outcomes during cross‑axis alignment or content‑based calculations.
10. Squashed Assorted CSS Layout Bugs
Rounding out the release are several targeted fixes, including: box-shadow now renders correctly on display: table-row elements; text-indent with percentage calc() values correctly treats those percentages as zero for intrinsic sizing; clip-path: inset() handles border‑radius accurately at any size; and elements with display: table no longer misbehave when borders are present. Also, :where and :is selector performance receives a welcome boost.
These ten changes represent just a slice of the polish in Preview 243. For developers, the mix of accessibility refinements and CSS spec compliance makes this a must‑update. Test your projects against this build to catch any regressions early—and enjoy the smoother developer experience.