Safari Technology Preview adds interpolate-size, Chrome's only so far
WebKit has started shipping interpolate-size and calc-size(), the CSS pair that lets you animate height: auto without JavaScript, two years after Chrome did.
Safari Technology Preview 254, released on 8 October, adds support for interpolate-size and calc-size(). Together they let you transition to and from intrinsic sizing keywords such as auto, min-content and fit-content — the CSS way to animate an accordion or a collapsing panel to its natural height, instead of faking it with a fixed max-height or a ResizeObserver.
Chrome and Edge have had both since version 129, in September 2024. Firefox has neither yet. This release note is the first sign of WebKit support, and it ships in the preview channel, not stable Safari.
html {
interpolate-size: allow-keywords;
}
.accordion-panel {
height: 0;
transition: height 0.3s;
}
.accordion-panel[open] {
height: auto;
}The same release adds size, min-size and max-size shorthands, border-*-radius side shorthands such as border-top-radius, and the symbols() function for defining counter styles.
Why it matters: height-to-auto transitions have been a Chrome-only trick for two years. Once this lands in stable Safari, a three-line CSS rule replaces a JavaScript workaround most component libraries still ship.
The caveat: Technology Preview is not shipping Safari. There is no date yet for stable, and Firefox has made no public commitment either, so a fallback is still needed for now.