From b4dccb865540e25a6d859e5284a50a36e361d5ee Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Wed, 17 Jan 2024 00:56:38 -0800
Subject: [PATCH] Add a workaround for a Safari rendering bug with floating
 menus

---
 .../src/messages/tool/tool_messages/select_tool.rs  |  2 +-
 frontend/src/components/layout/FloatingMenu.svelte  | 13 +++++++++++++
 frontend/src/components/layout/LayoutCol.svelte     |  2 ++
 frontend/src/components/layout/LayoutRow.svelte     |  2 ++
 4 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/editor/src/messages/tool/tool_messages/select_tool.rs b/editor/src/messages/tool/tool_messages/select_tool.rs
index fa84171b..f82742cc 100644
--- a/editor/src/messages/tool/tool_messages/select_tool.rs
+++ b/editor/src/messages/tool/tool_messages/select_tool.rs
@@ -1,7 +1,7 @@
 #![allow(clippy::too_many_arguments)]
 
 use super::tool_prelude::*;
-use crate::consts::{self, ROTATE_SNAP_ANGLE, SELECTION_TOLERANCE};
+use crate::consts::{ROTATE_SNAP_ANGLE, SELECTION_TOLERANCE};
 use crate::messages::input_mapper::utility_types::input_mouse::ViewportPosition;
 use crate::messages::portfolio::document::overlays::utility_types::OverlayContext;
 use crate::messages::portfolio::document::utility_types::document_metadata::LayerNodeIdentifier;
diff --git a/frontend/src/components/layout/FloatingMenu.svelte b/frontend/src/components/layout/FloatingMenu.svelte
index a66f2330..71d868f6 100644
--- a/frontend/src/components/layout/FloatingMenu.svelte
+++ b/frontend/src/components/layout/FloatingMenu.svelte
@@ -6,6 +6,8 @@
 <script lang="ts">
 	import { onMount, afterUpdate, createEventDispatcher, tick } from "svelte";
 
+	import { browserVersion } from "@graphite/utility-functions/platform";
+
 	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
 
 	const POINTER_STRAY_DISTANCE = 100;
@@ -63,6 +65,17 @@
 
 	// Called only when `open` is changed from outside this component
 	async function watchOpenChange(isOpen: boolean) {
+		// Mitigate a Safari rendering bug which clips the floating menu extending beyond a scrollable container.
+		// The bug is possibly related to <https://bugs.webkit.org/show_bug.cgi?id=160953>, but in our case it happens when `overflow` of a parent is `auto` rather than `hidden`.
+		if (browserVersion().toLowerCase().includes("safari")) {
+			const scrollable = self?.closest("[data-scrollable-x], [data-scrollable-y]");
+			if (scrollable instanceof HTMLElement) {
+				// The issue exists when the container is set to `overflow: auto` but fine when `overflow: hidden`. So this workaround temporarily sets
+				// the scrollable container to `overflow: hidden`, thus removing the scrollbars and ability to scroll until the floating menu is closed.
+				scrollable.style.overflow = isOpen ? "hidden" : "";
+			}
+		}
+
 		// Switching from closed to open
 		if (isOpen && !wasOpen) {
 			// TODO: Close any other floating menus that may already be open, which can happen using tab navigation and Enter/Space Bar to open
diff --git a/frontend/src/components/layout/LayoutCol.svelte b/frontend/src/components/layout/LayoutCol.svelte
index 5d0a7cf8..cce3ffc1 100644
--- a/frontend/src/components/layout/LayoutCol.svelte
+++ b/frontend/src/components/layout/LayoutCol.svelte
@@ -25,6 +25,8 @@
 
 <!-- Excluded events because these require `|passive` or `|nonpassive` modifiers. Use a <div> for these instead: `on:wheel`, `on:touchmove`, `on:touchstart` -->
 <div
+	data-scrollable-x={scrollableX ? "" : undefined}
+	data-scrollable-y={scrollableY ? "" : undefined}
 	class={`layout-col ${className} ${extraClasses}`.trim()}
 	class:scrollable-x={scrollableX}
 	class:scrollable-y={scrollableY}
diff --git a/frontend/src/components/layout/LayoutRow.svelte b/frontend/src/components/layout/LayoutRow.svelte
index 8eb96216..242eef86 100644
--- a/frontend/src/components/layout/LayoutRow.svelte
+++ b/frontend/src/components/layout/LayoutRow.svelte
@@ -25,6 +25,8 @@
 
 <!-- Excluded events because these require `|passive` or `|nonpassive` modifiers. Use a <div> for these instead: `on:wheel`, `on:touchmove`, `on:touchstart` -->
 <div
+	data-scrollable-x={scrollableX ? "" : undefined}
+	data-scrollable-y={scrollableY ? "" : undefined}
 	class={`layout-row ${className} ${extraClasses}`.trim()}
 	class:scrollable-x={scrollableX}
 	class:scrollable-y={scrollableY}