Remove backdrop filters on toolbars and listview to improve performance

svelte/src/filesystem/filemanager/CompactView.svelte

@@ -66,7 +66,6 @@ let {
 	padding: 2px;
 	align-items: center;
 	background: var(--body_background);
-	/* backdrop-filter: blur(4px); */
 	border-radius: 4px;
 	gap: 6px;
 	content-visibility: auto;

svelte/src/filesystem/filemanager/GalleryView.svelte

@@ -59,7 +59,6 @@ let {
 	contain-intrinsic-size: auto 150px;
 	overflow: hidden;
 	background: var(--body_background);
-	/* backdrop-filter: blur(4px); */
 	border-radius: 4px;
 	color: var(--input_text);
 	display: flex;

svelte/src/filesystem/filemanager/ListView.svelte

@@ -189,7 +189,6 @@ onMount(load_settings)
 	border-spacing: 0;
 	/* Tables are 100% wide, this leaves room for the bubble's margin */
 	width: calc(100% - 8px);
-	backdrop-filter: blur(4px);
 	overflow: hidden;
 }
 td {

svelte/src/wrap/MainMenu.svelte

@@ -1,6 +1,3 @@
-<script lang="ts" module>
-export let menu_is_open = writable(true)
-</script>
 <script lang="ts">
 import { highlight_current_page } from "lib/HighlightCurrentPage";
 import { user } from "lib/UserStore";
@@ -16,7 +13,6 @@ import Spinner from "util/Spinner.svelte";
 import { get_user } from "lib/NovaAPI";
 import Tree from "./Tree.svelte";
 import MenuEntry from "./MenuEntry.svelte";
-import { writable } from "svelte/store";
 import { breadcrumbs_store, toolbar_store } from "./HeaderStore";
 import ProgressBar from "util/ProgressBar.svelte";
 import NovaLogo, { update_favicon } from "util/NovaLogo.svelte";
@@ -126,7 +122,6 @@ const toggle_menu = (e: MouseEvent) => {
 }
 const menu_open = () => {
 	set_offset(0)
-	menu_is_open.set(true)
 	if (document.documentElement.clientWidth < min_screen_size_fullscreen_menu) {
 		menu.style.position = "fixed"
 		menu.style.width = "100%"
@@ -141,7 +136,9 @@ const menu_open = () => {
 }
 const menu_close = () => {
 	set_offset(-menu.getBoundingClientRect().width)
-	menu_is_open.set(false)
+	// A closed menu is only moved off-screen, hiding it makes sure the browser
+	// doesn't render its backdrop blur and keeps its links out of the tab order
+	menu.style.visibility = "hidden"
 	menu.style.position = "fixed"
 
 	if (document.documentElement.clientWidth >= min_screen_size_fullscreen_menu) {
@@ -153,6 +150,7 @@ const menu_close = () => {
 
 const set_offset = (off: number) => {
 	render_offset = off
+	menu.style.visibility = ""
 
 	if (off > -swipe_dead_zone) {
 		// Clear the transformation if the offset is zero
@@ -311,15 +309,23 @@ const set_offset = (off: number) => {
 	flex-direction: row;
 
 	color: var(--body_text_color);
+	width: 100%;
+	min-height: 100vh;
+}
+/* The page background is a layer of its own which stays in place while the page
+   scrolls. Mobile browsers repaint a background-attachment: fixed background on
+   every scroll frame, and iOS doesn't support it at all */
+.wrap::before {
+	content: "";
+	position: fixed;
+	inset: 0;
+	z-index: -1;
 	/* Without a branding image there's a faint glow in the accent colour */
 	background-image: var(--background_image, radial-gradient(ellipse 70% 60% at 15% 0%, color-mix(in srgb, var(--accent_color) 7%, transparent), transparent));
 	background-color: var(--background_color);
 	background-size: var(--background_image_size, initial);
 	background-position: var(--background_image_position, initial);
 	background-repeat: var(--background_image_repeat, repeat);
-	background-attachment: fixed;
-	width: 100%;
-	min-height: 100vh;
 }
 .nav_container {
 	flex: 0 0 auto;
@@ -370,7 +376,6 @@ const set_offset = (off: number) => {
 	flex: 0 0 auto;
 	display: flex;
 	flex-direction: column;
-	backdrop-filter: blur(3px);
 	position: sticky;
 	top: 4px;
 	z-index: 8; /* below navigation, on top of most other things */