pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove backdrop filters on toolbars and listview to improve performance

Browse Source
This commit is contained in:
Wim Brand
2026-10-01 11:41:40 +02:00
parent e37702d1aa
commit abe6ea9ff4
4 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
svelte/src/wrap/MainMenu.svelte
View File

@@ -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 */