Firefox 158 lets calc() divide a unit by a unit
Firefox 158 reached the release channel on October 13, and its release notes list typed arithmetic in CSS calc(), "allowing units to be multiplied and divided within math functions." Until now the spec only let you divide a length by a plain number, so 1000px / 2 worked and 1000px / 2px did not.
With the restriction relaxed, a length divided by a length cancels its units. The MDN guide uses calc(100vw / 1px), which returns the unitless 1000 in a 1000px viewport and 500 in a 500px one. Divide by 1em instead and the same viewport gives 62.5 at the default 16px.
- ShippedFirefox 158.0, release channel, October 13, 2026
- What changedSame-type division returns a number, like 600px / 1200px giving 0.5
- Where it goesUnitless properties directly, or any type after multiplying back by 1deg, 1%, or 1px
- BeforeThe same relationship needed a resize listener writing a custom property
That number is the useful part. Store it once in a custom property and opacity, rotation, and a variable font's width axis can all read from the same measurement, so they move together as a container grows or shrinks.
One width goes in, and CSS can now hand back a ratio it reuses everywhere.
The same release stops rounding scroll positions
Further down the same notes, Firefox no longer rounds scroll positions to whole screen pixels, which Mozilla says makes scrolling smoother and more precise on high-resolution displays and zoomed pages. Scroll-linked effects that read a position should land on fractional values now, so check any that assumed integers.
Webflow's MCP server can now read how a page performs
A Webflow post from October 15 says its MCP server now reads three data sources: Analyze for site and page traffic, goal completions, and filtered queries; Optimize for experiment results, including the winning variation; and AEO Analytics for AI crawler requests per page and how answer engines responded to tracked prompts.
It is read access for now. Webflow says creating and editing Optimize experiments through agents is still in development, and access follows existing Analyze, Optimize, or AEO permissions at no extra cost. It extends the MCP work issue 136 covered, when the same server learned to build GSAP interactions.
Measure once, then multiply back into any unit
The pattern has two steps. Divide a measured length by a reference length to get a ratio, then multiply the ratio by a unit to turn it into an angle, a percentage, or a different length. Container query units make the measurement local, so a card can scale its own details without knowing the page.
/* the card is the container that gets measured */
.card { container-type: inline-size; }
/* 0 at nothing, 1 at 640px wide */
.card .badge {
opacity: clamp(.15, calc(100cqi / 640px), 1);
rotate: calc(100cqi / 1px * .5deg);
font-stretch: clamp(62%, calc(100cqi / 520px * 125%), 125%);
}
/* keep a sane value where division is not supported */
@supports not (opacity: calc(2px / 1px)) {
.card .badge { opacity: .6; rotate: 0deg; font-stretch: 100%; }
}Wrap the ratio in clamp() every time. A divided measurement has no ceiling, and a badge that hits opacity 3 or a 900 degree spin at a wide breakpoint is the bug you will see first.
A studio slips the page between two canvases
OFF+BRAND's write-up of the Dialed site, published October 15 on Webflow's blog, walks through a homepage carousel where each flavour changes the interface colours, typography, and graphics around a floating 3D can.
The move worth taking is the layering. One WebGL renderer draws the scene, and the second frame goes to a second canvas through drawImage(), so ordinary DOM elements can sit between the two. Three depth layers and a dual Kawase blur give the flying paper its depth of field.
For a portfolio, that means the type and buttons stay real, selectable HTML while the motion runs above and below them.
