What Firefox 144 Fixes for Web Developers

TL;DR

Firefox 144 finally ships view transitions and the element.moveBefore API, plus proper gradient dithering after a bug that stayed open for 15 years. View transitions let the browser animate page navigations and in-page state changes from CSS alone, with no JavaScript, which unblocks frameworks like React that plan to use them as the main way to handle changes.

Transcript

As I'm sure you guys know, Firefox is by far my favorite browser. That's why I use it every uh wait, that's Helium, the Chromium fork that is way more private and better performing. No worries. I'm going to switch over to Firefox now. Oh, that's Zen browser, a customizable browser that I use for most of my content. I guess Firefox isn't really a br... Read More

Key Insights

• Firefox 144 adds the element.moveBefore API, which relocates a DOM element without deleting and recreating it. A playing video keeps its playback position, volume, and mute state, removing the need to programmatically reconstruct that state on a new node.
• The view transitions API lets a web page animate between states using browser standards and minimal CSS flags applied to specific elements, with no JavaScript moving elements around. The browser generates the animation between the old and new page states.
• View transitions work by requiring different elements in the old and new states to share the same view transition name, after which the browser handles the difference between them. The speaker compares the effect to Magic Move in Keynote.
• Removing an item from a list cannot be animated with normal DOM code because you cannot animate what does not exist. The usual workaround is leaving a fake version in place, animating it, then removing it once the animation finishes.
• The React team has worked hard on getting view transitions adopted and integrated across browsers, because React plans to use view transitions as its main way to handle changes going forward. React can group multiple view transitions by calling them all at once.
• Gradient dithering blurs the gaps between the layers of a gradient by adding a little noise between every layer. Without it, a rendered gradient shows visible stripes because the color difference between rows is not handled properly.
• The Firefox gradient bug was open for 15 years and had largely died before the speaker complained about it publicly. Zen browser contributors patched Firefox's rendering themselves back in June rather than keep waiting.
• element.moveBefore is supported in Firefox 144 but still absent from Safari, so it is not ready for universal adoption. The speaker notes that when Chrome and Firefox both support something, Safari tends to follow.
• View transitions arrived in Firefox years after other browsers, with even mobile Safari already supporting them. Firefox was the last holdout, so the level one standard can now be relied on across the browsers developers must support.

Questions & Answers

Q: What is new for developers in Firefox 144?

Firefox 144 brings three platform changes the speaker cares about. The element.moveBefore API lets you move a DOM element without destroying its state. View transitions, the level one standard, let the browser animate changes between page states. And gradients now render with dithering, fixing a bug that produced visible stripes. The release also adds a focus tab feature, tab groups updates, profile management, picture hotkeys, visual search powered by Google Lens, Perplexity AI as an option, and some math shift metric work.

Q: How does the element.moveBefore API work?

element.moveBefore moves an element to a new place in the browser without anything about it changing. Normally, relocating an element means deleting it and recreating it elsewhere, which destroys its state and forces you to sync everything back by hand. With moveBefore, a video that is playing keeps its position in the playback, its selected volume, and its mute state. All of the state you would otherwise have to programmatically recreate on a new node is handled by the DOM API itself.

Q: What is the view transitions API and why does it matter?

The view transitions API is a web standard that allows web pages to change as you navigate them and move between different places. It works with browser standards and very minimal CSS flags applied to specific elements, so none of the animation is JavaScript. When the page navigates from one state to another, the browser creates the animation for you. It covers both URL changes, which have historically been very hard to animate, and changes within a single page.

Q: How do you implement a view transition technically?

Technically, view transitions require different elements in the old state and the new state that use the same view transition name. Once those names match, the browser handles the difference between the two and generates the animation. The speaker compares the result to Magic Move in Keynote. You can also group view transitions together by calling them all at once, which is how the new React version handles them. Applying them is described as trivial, even for a basic fade in and out.

Q: Why do view transitions matter for React?

The React team has worked really hard on getting view transitions meaningfully adopted and integrated across all browsers, because they plan on using view transitions as the main way to handle changes in React going forward. The problem view transitions solve for React is removal animations. If you take an item out of a to-do list, it is no longer in the DOM, and you cannot animate something that does not exist. Firefox support means React can now actually rely on them.

Q: How were removal animations handled before view transitions?

Without view transitions, animating a removed element requires a workaround. Because the element is gone from the DOM once removed, and you cannot animate what does not exist, developers write the removal code so it leaves a fake version of the element in place, animates that fake, and only actually removes it once the animation finishes. The speaker calls this not good. With view transitions, the browser handles the difference between one state that has the element and another that does not.

Q: What is gradient dithering and what was broken in Firefox?

Dithering is how you take the layers of a gradient and blur the gaps between them so the gradient looks much smoother. Most gradient renderers and most browsers dither by adding a little bit of noise between every layer. Firefox did not, so rendering a gradient produced visible stripes, because the difference in color for each row was not handled properly. The speaker calls it egregious, and notes the bug report stayed open for 15 years before being addressed.

Q: Why did Zen browser patch the gradient bug itself?

Zen browser is a customizable, Firefox based browser the speaker uses for most of their content. While making a tutorial in Zen, the speaker hit the striped gradient rendering, felt sick about it, and complained online, as they had many times before. The Zen contributors went and patched Firefox's rendering themselves back in June rather than keep waiting on the upstream fix. The underlying issue had been open for 15 years and had largely died before the public complaints revived it.

Q: Can developers rely on these features across all browsers now?

Not entirely. element.moveBefore is now in Firefox, though not marked as such there yet, but it is still missing from Safari, so it is not quite ready for universal adoption or the expectation that it behaves properly everywhere. The speaker notes that when Chrome and Firefox both support something, Safari tends to follow. View transitions are further along: even mobile Safari already supports them, and Firefox was the last browser to adopt the core level one standard, years late.

Summary & Key Takeaways

• Firefox has long been the browser the speaker jokes about and avoids, having moved to Helium, a Chromium fork described as more private and better performing, and Zen browser, a customizable browser used for most content. The complaints are not user-facing bugs but small to medium platform gaps that hold developers and the wider web back.

• Firefox 144 ships several non-platform features first: a focus tab feature, more tab groups updates, profile management, picture hotkeys, visual search powered by Google Lens, and Perplexity AI as an option. The speaker notes Firefox is paid billions of dollars by Google to keep Google as the default search engine, and reads the Lens and Perplexity additions as the money showing.

• The platform changes that matter are element.moveBefore, view transitions, and fixed gradient dithering. moveBefore relocates an element without destroying state, view transitions let the browser animate between old and new states via matching view transition names, and dithering adds noise between gradient layers so they stop rendering as visible stripes.