Inaccurate Math Statement about Cubic Bézier Curves

[crrrr30]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/easing-function/cubic-bezier

What specific section or headline is this issue about?

Description

What information was incorrect, unhelpful, or incomplete?

With P0 and P3 fixed as defined by CSS, a cubic Bézier curve is a function, and is therefore valid, if and only if the x-axis coordinates of P1 and P2 are both in the [0, 1] range.

The "only if" ($\Rightarrow$) direction does not hold.

What did you expect to see?

With P0 and P3 fixed as defined by CSS, a cubic Bézier curve is a function, and is therefore valid, if and only if the x-axis coordinates of P1 and P2 are both in the [0, 1] range.

Do you have any supporting links, references, or citations?

One counterexample is given by taking 1.1 and 0.5 for the $x$-coordinates of $P_1$ and $P_2$.

Here, the $x$-coordinate has $x'(t)=42/5\cdot t^2 - 51/5\cdot t + 33/10$, where the minimum value on $t\in[0,1]$ is $57/280>0$ achieved when $t=17/28$.

While not an evidence in support of my argument, the CSS Easing Level 1 Specification doesn't make the same assertion; it instead only states that

The x coordinates of P1 and P2 are restricted to the range [0, 1].

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/css/reference/values/easing-function/cubic-bezier
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/easing-function/cubic-bezier
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/reference/values/easing-function/cubic-bezier/index.md
• Last commit: 33094d7
• Document last modified: 2025-12-16T15:14:26.000Z