Safari Technology Preview 241: Accessibility, CSS, and Animation Fixes & Features
By
<h2 id="introduction">Introduction</h2>
<p>Safari Technology Preview Release 241 is now available for download on macOS Tahoe and macOS Sequoia. If you already have the preview installed, you can update it in System Settings under General → Software Update. This release brings a host of improvements and bug fixes derived from WebKit changes between revisions 309287 and 310186. The updates span accessibility, animations, and CSS—addressing both new capabilities and nagging issues that developers and users may have encountered.</p><figure style="margin:20px 0"><img src="https://webkit.org/wp-content/themes/webkit/images/preview-card.jpg" alt="Safari Technology Preview 241: Accessibility, CSS, and Animation Fixes & Features" style="width:100%;height:auto;border-radius:8px" loading="lazy"><figcaption style="font-size:12px;color:#666;margin-top:5px">Source: webkit.org</figcaption></figure>
<h2 id="accessibility">Accessibility Improvements</h2>
<h3 id="accessibility-resolved">Resolved Issues</h3>
<ul>
<li><strong>Speech synthesis queue handling:</strong> Fixed a problem where calling <code>speechSynthesis.cancel()</code> would incorrectly remove utterances queued by subsequent <code>speechSynthesis.speak()</code> calls. This ensures that cancellation only affects the current utterance without wiping out pending speech.</li>
<li><strong>MathML bounding boxes:</strong> Corrected inaccurate bounding boxes for MathML table rows and cells, improving assistive technology interactions with mathematical content.</li>
<li><strong>Combobox focus forwarding:</strong> Resolved an issue where comboboxes failed to forward focus to their <code>aria-activedescendant</code>, preventing screen readers and other assistive tools from accessing list items within the combobox.</li>
<li><strong>Accessible name computation with aria-owns:</strong> Fixed a bug where the <code>aria-owns</code> attribute was not respected when computing the accessible name from element content, which could cause missing or incorrect labels.</li>
</ul>
<h2 id="animations">Animation Enhancements</h2>
<h3 id="animations-resolved">Resolved Issues</h3>
<ul>
<li><strong>Viewport-based units in animation-fill-mode:</strong> Corrected an issue where <code>animation-fill-mode</code> did not correctly apply viewport-based units after the viewport was resized. This ensures that animations using <code>vh</code>, <code>vw</code>, or similar units update smoothly during resizing.</li>
</ul>
<h2 id="css">CSS Updates and Fixes</h2>
<h3 id="css-new-features">New Features</h3>
<ul>
<li><strong>Stretch keyword in box sizing:</strong> Added support for the <code>stretch</code> keyword in box sizing properties, aligning with the latest CSS specifications.</li>
<li><strong>CSS scroll anchoring (stable):</strong> Introduced stable support for CSS scroll anchoring, which prevents unexpected page jumps when content loads above the user's viewport. This feature helps maintain scroll position during dynamic content changes.</li>
</ul>
<h3 id="css-resolved">Resolved Issues</h3>
<ul>
<li><strong>Line separator rendering:</strong> Fixed an issue where U+2028 LINE SEPARATOR was not rendered as a forced line break per the CSS specification—now it behaves correctly.</li>
<li><strong>Outline offset inflation:</strong> Corrected an inflation effect where <code>outline-offset</code> was wrongly increased for <code>outline: auto</code> on macOS, making outlines appear as specified.</li>
<li><strong>Font-family serialization:</strong> Improved font-family serialization to preserve quotes around family names that match CSS-wide keywords or generic families, preventing parsing errors.</li>
<li><strong>Unnecessary font downloads:</strong> Fixed a bug where a font was downloaded even though no characters in the document fell within its <code>unicode-range</code>, saving bandwidth and improving performance.</li>
<li><strong>Flex item with percentage-height image:</strong> Resolved an issue where a flex item containing a percentage-height image did not shrink correctly around the image, causing layout distortion.</li>
<li><strong>View Transition snapshots color space:</strong> Corrected storage of View Transition snapshots, which were incorrectly kept in sRGB, causing rendering issues with non-sRGB colors. Now they use the proper color space.</li>
<li><strong>contain: layout performance:</strong> Fixed a performance regression where <code>contain: layout</code> caused significantly slower forced layouts when all siblings created their own formatting context—reducing layout time for complex pages.</li>
<li><strong>Underline splitting with long ruby text:</strong> Addressed an issue where underlines were split incorrectly when a ruby base was expanded due to long ruby text, improving text decoration consistency.</li>
<li><strong>Background repaint for composited iframes on color-scheme change:</strong> Fixed a visual glitch where changing <code>color-scheme</code> did not repaint the background of composited iframes, ensuring seamless theme transitions.</li>
<li><strong>Nested children in popover with position: absolute:</strong> Resolved a bug where nested children of a popover element failed to render when using <code>position: absolute</code>, improving popover content visibility.</li>
<li><strong>color: initial in dark mode:</strong> Corrected how <code>color: initial</code> resolved in dark appearance mode, which previously resulted in the wrong color.</li>
<li><strong>display: contents and anchor-scope:</strong> Fixed an issue where an element with <code>display: contents</code> did not establish an anchor scope when using <code>anchor-scope</code>, affecting anchored positioning.</li>
<li><strong>Media query regression:</strong> Fixed a regression where media queries could fail to resolve correctly under certain conditions (exact context unspecified in the log).</li>
</ul>
<p>For a complete list of changes, refer to the WebKit changelog. The Safari Technology Preview continues to be an excellent testing ground for upcoming Safari features—download or update today to take advantage of these fixes and enhancements.</p>