Safari Technology Preview 254 lets WebKit animate to auto and trims the radius longhands

You built a disclosure panel. Closed state gets height: 0, open state gets height: auto, you add a transition, and it snaps open in a single frame with no animation at all. So you did what everyone does and reached for this:

.panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 300ms ease;
}

.panel.is-open {
  max-height: 1000px; /* a guess */
}

It works, sort of. The easing runs against a number you made up, so short content opens fast and closes after an awkward pause. I have shipped that hack more than once.

Safari Technology Preview 254 puts the real fix into a WebKit build you can open today. Jon Davis published the release notes on 8 October 2026. The build is for macOS Golden Gate and macOS Tahoe and covers WebKit changes 321068@main through 322634@main. Preview channel, one engine.

Six lines under CSS new features

The CSS section opens with six additions:

• The interpolate-size property, which per the notes "allows animations and transitions to and from intrinsic sizing keywords such as auto, min-content, and fit-content."
• The calc-size() function, which allows calculations on intrinsic sizes such as auto, fit-content, and max-content.
• The size, min-size, and max-size shorthand properties.
• The border-*-radius side shorthands, such as border-top-radius, which set the radii of both corners on one side of a box at once.
• The symbols() function for defining anonymous counter styles.
• CSS linked parameters: the link-parameters property and param(), for passing values into linked SVG images.

The first two belong together, so let's start there.

Why auto never tweened

Interpolation needs two numbers. 0 is one. auto is a keyword that layout resolves later, from the content. With no numeric end point at style time, the browser has nothing to compute a midpoint against, so the change lands at once. The max-height trick swaps the keyword for a fake number to give the transition something to chew on. That is the whole reason the hack exists.

The notes describe interpolate-size as a property and calc-size() as a function, and that difference tells you where each one lives. A property sits on an element and rides the cascade like anything else you declare. A function sits inside a single value. So interpolate-size is the switch that permits animating to and from those intrinsic keywords. calc-size() is for when you want the content-driven size as an input to arithmetic, not as the final answer.

The notes do not include example declarations for either, and I am not going to paste value syntax the source does not show. Read the value grammar in the spec before you write your first one.

Further down, the same notes show calc-size() already threaded through layout code: a fix makes table-layout: fixed stop being ignored when a table's width is intrinsic, min-intrinsic, or a calc-size() value.

Fewer corners to spell out

Rounding just the top of a card has always meant two declarations:

.card {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

border-top-radius sets both corners on that side in one go. Same story for size, min-size, and max-size, which the notes list as shorthands without spelling out their longhands in the entry.

The general shorthand rule still applies: a shorthand resets every longhand it covers. Drop border-top-radius below a carefully tuned border-top-left-radius and the cascade hands the win to the later declaration. That is not a WebKit quirk, just how shorthands work. Audit before you collapse.

What the fixes do to your grids

The resolved-issues list is long, and much of it is layout. A few entries I'd test against real pages:

• Grid relayout cost grew quadratically with the number of items carrying distinct order values. Fixed.
• Items spanning multiple tracks are now sized in groups by span count, as the Grid spec requires, and extra space is distributed per the current spec.
• fit-content() tracks no longer grow past their limit when extra space gets distributed.
• A grid item's minimum size contribution now uses its margin box, not its border box.

On the text side, line-clamp and -webkit-line-clamp now share the same underlying values and cascade against each other, with -webkit-line-clamp treated as a shorthand. line-clamp also stops being ignored on floats and absolutely positioned boxes. And ::picker-icon on <select> now draws its arrow as a built-in glyph, so you can delete the margin reset you added to tame it.

Two VoiceOver fixes matter for anyone who styles controls. VoiceOver could not press buttons, links, and form controls styled with pointer-events: none, and it announced every focused ARIA menuitem, menuitemcheckbox, and menuitemradio as "selected". Both are fixed.

Before you delete the max-height hack

This is a Technology Preview build. The notes make no Baseline claim and say nothing about other engines, so neither will I. Keep the max-height fallback in place, layer the intrinsic-size animation on top as an enhancement gated behind @supports, and treat the shorthands the same way until they reach stable releases.

Then go find the oldest disclosure panel in your codebase. Open it in STP 254, check what the new property does to it, and leave a comment above that 1000px guess. One day it gets to go.