diff --git a/CHANGELOG.md b/CHANGELOG.md
index bdbf4bb5b4..b276f7c03d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,12 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/).
Undocumented APIs should be considered internal and may change without warning.
+## [11.3.2] 2024-07-11
+
+### Fixed
+
+- No longer adding `background-color` to `will-change`.
+
## [11.3.1] 2024-07-11
### Updated
diff --git a/dev/html/public/benchmarks/pregenerated-background-color.html b/dev/html/public/benchmarks/pregenerated-background-color.html
new file mode 100644
index 0000000000..d4a6a7b93d
--- /dev/null
+++ b/dev/html/public/benchmarks/pregenerated-background-color.html
@@ -0,0 +1,315 @@
+
+
+ Pre-generated keyframes performance
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/framer-motion/src/animation/animators/AcceleratedAnimation.ts b/packages/framer-motion/src/animation/animators/AcceleratedAnimation.ts
index ccf850c124..05a443fe96 100644
--- a/packages/framer-motion/src/animation/animators/AcceleratedAnimation.ts
+++ b/packages/framer-motion/src/animation/animators/AcceleratedAnimation.ts
@@ -45,11 +45,7 @@ const maxDuration = 20_000
function requiresPregeneratedKeyframes(
options: ValueAnimationOptions
) {
- return (
- options.type === "spring" ||
- options.name === "backgroundColor" ||
- !isWaapiSupportedEasing(options.ease)
- )
+ return options.type === "spring" || !isWaapiSupportedEasing(options.ease)
}
function pregenerateKeyframes(
diff --git a/packages/framer-motion/src/value/use-will-change/__tests__/will-change.test.tsx b/packages/framer-motion/src/value/use-will-change/__tests__/will-change.test.tsx
index 7213126bd4..80448cfcfa 100644
--- a/packages/framer-motion/src/value/use-will-change/__tests__/will-change.test.tsx
+++ b/packages/framer-motion/src/value/use-will-change/__tests__/will-change.test.tsx
@@ -48,9 +48,7 @@ describe("willChange", () => {
const { container } = render()
- expect(container.firstChild).toHaveStyle(
- "will-change: transform,background-color;"
- )
+ expect(container.firstChild).toHaveStyle("will-change: transform;")
})
test("Static mode: Doesn't render values defined in animate on initial render", async () => {
@@ -64,9 +62,7 @@ describe("willChange", () => {
const { container } = render()
- expect(container.firstChild).not.toHaveStyle(
- "will-change: transform,background-color;"
- )
+ expect(container.firstChild).not.toHaveStyle("will-change: transform;")
})
test("Renders values defined in animate on initial render", async () => {
diff --git a/packages/framer-motion/src/value/use-will-change/get-will-change-name.ts b/packages/framer-motion/src/value/use-will-change/get-will-change-name.ts
index 591b6091fa..34d71fed5f 100644
--- a/packages/framer-motion/src/value/use-will-change/get-will-change-name.ts
+++ b/packages/framer-motion/src/value/use-will-change/get-will-change-name.ts
@@ -5,13 +5,7 @@ import { transformProps } from "../../render/html/utils/transform"
export function getWillChangeName(name: string): string | undefined {
if (transformProps.has(name)) {
return "transform"
- } else if (
- acceleratedValues.has(name) ||
- // Manually check for backgroundColor as accelerated animations
- // are currently disabled for this value (see `acceleratedValues`)
- // but can still be put on the compositor.
- name === "backgroundColor"
- ) {
+ } else if (acceleratedValues.has(name)) {
return camelToDash(name)
}
}