From 8b7c52ef891138af567774867a354d7b86f0b9ce Mon Sep 17 00:00:00 2001 From: Sainath Poojary Date: Mon, 6 Jan 2025 12:34:30 +0530 Subject: [PATCH] Components: Move will-change inside media query for transform optimization - ResizableBox: Optimized transform. - CircularOptionPicker: Optimized transform. --- packages/components/src/circular-option-picker/style.scss | 3 +-- packages/components/src/resizable-box/style.scss | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss index d62164cbf3122b..5cbedb4f89053a 100644 --- 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 index 753a0965bce507..a9ff7ea237e5f6 100644 --- 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; }