From 1ccc90573ff0d2067db474fc6e407e446a4803e6 Mon Sep 17 00:00:00 2001 From: Mark Noonan Date: Tue, 12 Jul 2022 00:00:49 -0400 Subject: [PATCH] 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 Co-authored-by: Zachary Williams --- packages/app/src/runner/ResizablePanels.vue | 4 ---- packages/app/src/runner/useRunnerStyle.ts | 5 +++++ 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/app/src/runner/ResizablePanels.vue b/packages/app/src/runner/ResizablePanels.vue index fe478190e2..f4f19ff9e1 100644 --- 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' - diff --git a/packages/app/src/runner/useRunnerStyle.ts b/packages/app/src/runner/useRunnerStyle.ts index 591c3b6e65..41149c36e6 100644 --- 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