From ac498bd4d6d05406d7861c6046d71af504142c34 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Thu, 26 Sep 2024 10:19:40 +0200
Subject: [PATCH 1/2] [code-infra] Fix flaky dashboard screenshot

---
 test/regressions/index.test.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/test/regressions/index.test.js b/test/regressions/index.test.js
index a0f4b5ad30c89d..1e68a4da2fff8f 100644
--- a/test/regressions/index.test.js
+++ b/test/regressions/index.test.js
@@ -7,7 +7,15 @@ async function main() {
   const screenshotDir = path.resolve(__dirname, './screenshots/chrome');
 
   const browser = await playwright.chromium.launch({
-    args: ['--font-render-hinting=none'],
+    args: [
+      '--font-render-hinting=none',
+      // Playwright hides scrollbars when taking screenshots, this causes the width to slightly change
+      // for a brief moment. Some UI, such as responsive charts measure DOM elements in effects and
+      // update the UI based on the width. This causes a race condition where the screenshot is taken
+      // before the UI is updated. This makes the screenshot flaky. We can just always hide the scrollbar
+      // to prevent this.
+      '--hide-scrollbars',
+    ],
     // otherwise the loaded google Roboto font isn't applied
     headless: false,
   });

From 44f12902f430e146601866231f068487643b8664 Mon Sep 17 00:00:00 2001
From: MUI bot <2109932+Janpot@users.noreply.github.com>
Date: Thu, 26 Sep 2024 11:22:10 +0200
Subject: [PATCH 2/2] dewf

---
 test/regressions/index.test.js | 10 +---------
 test/regressions/template.html |  9 +++++++++
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/test/regressions/index.test.js b/test/regressions/index.test.js
index 1e68a4da2fff8f..a0f4b5ad30c89d 100644
--- a/test/regressions/index.test.js
+++ b/test/regressions/index.test.js
@@ -7,15 +7,7 @@ async function main() {
   const screenshotDir = path.resolve(__dirname, './screenshots/chrome');
 
   const browser = await playwright.chromium.launch({
-    args: [
-      '--font-render-hinting=none',
-      // Playwright hides scrollbars when taking screenshots, this causes the width to slightly change
-      // for a brief moment. Some UI, such as responsive charts measure DOM elements in effects and
-      // update the UI based on the width. This causes a race condition where the screenshot is taken
-      // before the UI is updated. This makes the screenshot flaky. We can just always hide the scrollbar
-      // to prevent this.
-      '--hide-scrollbars',
-    ],
+    args: ['--font-render-hinting=none'],
     // otherwise the loaded google Roboto font isn't applied
     headless: false,
   });
diff --git a/test/regressions/template.html b/test/regressions/template.html
index 7320fbea9c6c2f..2db3991ae1f3aa 100644
--- a/test/regressions/template.html
+++ b/test/regressions/template.html
@@ -7,6 +7,15 @@
     <style>
       body {
         background-color: white;
+        /* 
+        Hide scrollbars but keep scrollable. Playwright hides scrollbar when capturing a screenshot on an element
+        or with fullPage: true. When the body has a scrollbar, this causes a brief layout shift.
+        */
+        -ms-overflow-style: none; /* Internet Explorer 10+ */
+        scrollbar-width: none; /* Firefox */
+      }
+      body::-webkit-scrollbar {
+        display: none; /* Safari and Chrome */
       }
     </style>
   </head>