Safari Technology Preview 254, released on October 8 for macOS Golden Gate and macOS Tahoe, includes a useful change for web developers building expandable interfaces: support for interpolate-size and calc-size(). The practical opportunity is to let CSS animate toward a content-driven size without measuring that endpoint in JavaScript. [1]
What actually changed
WebKit’s implementation and enablement landed separately. The September implementation of interpolate-size uses the calc-size feature flag. An October 2 change then switched that flag from disabled to enabled by default; both changes are included in Preview 254. This is more than a correction to an existing animation. [2][3]
The distinction matters when reading older implementation reports. A feature can exist in source code before becoming available under the preview browser’s default settings. For this release, developers can begin testing without first enabling that experimental flag.
How the opt-in works
Browser support does not automatically change every existing transition. The CSS property starts at numeric-only. Set interpolate-size: allow-keywords on the element or an ancestor to permit interpolation between a numeric length or percentage and a supported intrinsic sizing keyword. The property is inherited, so a component-level selector keeps the change scoped. [4]
For an expandable panel, CSS can transition from 0px to auto as its open state changes. Two different intrinsic keywords, such as min-content and max-content, still cannot interpolate directly. [4]
Illustrative sizing fragment, not a complete disclosure widget or a hands-on test. An existing control toggles is-expanded:
.panel {
height: 0;
overflow: clip;
}
.panel.is-expanded { height: auto; }
@supports (interpolate-size: allow-keywords) {
@media (prefers-reduced-motion: no-preference) {
.panel {
interpolate-size: allow-keywords;
transition: height 180ms ease;
}
}
}Without support, or when reduced motion is requested, the panel changes size immediately.
Use calc-size() when the endpoint also requires arithmetic. For example, calc-size(auto, size + 1rem) expresses the automatic size plus an extra rem. The size keyword refers to the chosen sizing basis. [5]
Keep the fallback intact
Preview 254 is a development browser release. Its support alone does not establish availability in the Safari versions visitors use on their Macs, iPhones or iPads. [1][6]
Treat the motion as an enhancement: preserve a working open and closed state when interpolation is unavailable, and retain a conventional sizing declaration before a calc-size() declaration. Unsupported browsers can ignore the latter. [5]
Test long content and narrow layouts before replacing an existing implementation. Preserve keyboard and focus handling, the control’s expanded state, and appropriate hiding of collapsed content from assistive technology. A height transition alone does not provide those behaviors.
Sources
WebKit release notes, October 8, 2026
WebKit: Implement interpolate-size
WebKit: Enable calc-size() by default
CSS Values and Units Level 5: interpolate-size
