Components: Move will-change inside media query for transform optimiz…

…ation - ResizableBox: Optimized transform. - CircularOptionPicker: Optimized transform.
WordPress · Jan 6, 2025 · 8b7c52e · 8b7c52e
1 parent 3ab4762
commit 8b7c52e
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 3 deletions.
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
@@ -38,10 +38,9 @@ $color-palette-circle-spacing: 12px;
 
 	@media not (prefers-reduced-motion) {
 		transition: 100ms transform ease;
+		will-change: transform;
 	}
 
-	will-change: transform;
-
 	&:hover {
 		transform: scale(1.2);
 	}

diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss
@@ -63,9 +63,9 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 
 	@media not (prefers-reduced-motion) {
 		transition: transform 0.1s ease-in;
+		will-change: transform;
 	}
 
-	will-change: transform;
 	opacity: 0;
 }