fix: avoid overflow issue in Firefox (#22620)

* fix: update positioning of runner * remove isFirefox check * Update packages/app/src/runner/useRunnerStyle.ts Co-authored-by: Zachary Williams <ZachJW34@gmail.com> Co-authored-by: Zachary Williams <ZachJW34@gmail.com>
cypress-io · Jul 12, 2022 · 1ccc905 · 1ccc905 · cypress-bot · Jul 12, 2022
1 parent 871e54f
commit 1ccc905
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/packages/app/src/runner/ResizablePanels.vue b/packages/app/src/runner/ResizablePanels.vue
@@ -4,7 +4,6 @@
     class="flex"
     :class="{
       'select-none': panel1IsDragging || panel2IsDragging,
-      'overflow-x-hidden': isFirefox
     }"
     @mouseup="handleMouseup"
     @mousemove="handleMousemove"
@@ -208,7 +207,4 @@ watchEffect(() => {
   }
 })
 
-// TODO: UNIFY-1704 - avoid special case for FF
-const isFirefox = window.__CYPRESS_BROWSER__?.family === 'firefox'
-
 </script>
diff --git a/packages/app/src/runner/useRunnerStyle.ts b/packages/app/src/runner/useRunnerStyle.ts
@@ -62,10 +62,15 @@ export const useRunnerStyle = () => {
   })
 
   const viewportStyle = computed(() => {
+    // in the below styles, `position: absolute` is required to avoid certain edge cases
+    // that can happen with overflow (mainly, in Firefox, but not always)
+    // see this issue for details: https://github.com/cypress-io/cypress/issues/21881
+
     let style = `
     width: ${autStore.viewportDimensions.width}px;
     height: ${autStore.viewportDimensions.height}px;
     transform: scale(${scale.value});
+    position: absolute;
     `
 
     // to keep the AUT iframe centered during scaling, we need to calculate the difference between