New in Chrome 129

Pete LePage

Here's what you need to know:

You can yield in long tasks to improve performance.
Animate elements with intrinsic sizes.
There are some changes to anchor positioning syntax.
And there's plenty more.

I'm Pete LePage. Let's dive in and see what's new for developers in Chrome 129.

Break up long tasks with `scheduler.yield()`

Long tasks delay the browser's ability to respond to user input, creating a perception that a site is slow, and impacting critical performance metrics like INP. With scheduler.yield(), you can break up long tasks into smaller chunks, improving responsiveness by explicitly yielding back to the main thread.

It lets you tell the browser:

"HEY! The work I'm about to do could take a while, if you need to paint a frame, respond to user input, or have other important tasks, it's OK, I can wait"

A depiction of how breaking up a task can facilitate a user interaction. At the top, a long task blocks an event handler from running until the task is finished. At the bottom, the chunked up task permits the event handler to run sooner than it otherwise would have.

Add the following line into your JavaScript code frequently to give the browser breathing space, and avoid INP issues.

await scheduler.yield();

Importantly, it allows continuation of your code to be prioritized so you don't lose out by yielding. We recommend liberal use of scheduler.yield() in functions between any larger chunks of work.

See Optimize long tasks for more details.

Animations with intrinsic sizes

CSS animations are pretty sweet, but they typically require explicit sizes, you couldn't use the intrinsic sizing keywords like auto, min-content, or fit-content.

The CSS property interpolate-size opens up a new set of animations that weren't possible when using intrinsic sizing keywords.

Without interpolate-size, the buttons in the following video have no transition.

After adding interpolate-size: allow-keywords, the buttons in the video get a beautiful transition animation effect.

Specifying interpolate-size: allow-keywords on the root element sets the new behavior for the entire page. We suggest doing this whenever compatibility isn't an issue.

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

For finer control, the CSS calc-size() function, similar to calc(), also supports operations on exactly one of the supported intrinsic sizing keywords. When performing layout calculations, the size keyword evaluates to the original size of calc-size-basis.

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

Check out Animate to height: auto; (and other intrinsic sizing keywords) in CSS for complete details.

Changes to CSS anchor positioning

CSS anchor positioning landed in Chrome 125, but after some additional discussion within the CSS working group, there are a few changes to the spec and implementation. If you're already using CSS anchor position, you'll need to update your code as soon as possible.

First, inset-area has been renamed to position-area. This was preferred because the phrasing position- helps you remember that this property is applied to the positioned element, not the anchor element.

Second, position-try-options is renamed to position-try-fallbacks. This helps you remember that these are just fallbacks to the primary position, which is determined by the base styles.

Finally, the inset-area() functional syntax is being removed from position-try. Therefore use position-try-fallbacks: top instead of position-try-fallbacks: inset-area(top).

And more!

Of course there's plenty more.

There's a new Intl method for formatting durations, with support for multiple locales.

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

Web GPU canvas can now use the full range of the display for HDR images.

And there are a few deprecations and removals that may impact some developers.

Read the full release notes.

New in Chrome 129

Break up long tasks with scheduler.yield()

Animations with intrinsic sizes

Changes to CSS anchor positioning

And more!

Further reading

Subscribe

Break up long tasks with `scheduler.yield()`