Der Hintergrundfilter funktioniert nicht, nachdem die View Transitions API aktiviert und der View-Transition-Name zugewi ⇐ CSS

[Anonymous]

Ich implementiere reibungslose Seitenübergänge mithilfe der View Transitions API in meiner Svelte-App.
Hier ist das Problem, mit dem ich konfrontiert bin: Nachdem ich einen benutzerdefinierten Ansichtsübergangsstamm festgelegt und meinem Hauptcontainer und der unteren Navigationsleiste einen Ansichtsübergangsnamen zugewiesen habe, funktioniert der CSS-Hintergrundfilter (und -webkit-Hintergrundfilter) in meiner unteren Navigation überhaupt nicht mehr.
Es hat perfekt funktioniert, bevor die Eigenschaft „view-transition-name“ hinzugefügt wurde.
vorher
geben Sie hier die Bildbeschreibung ein
nachher
geben Sie hier die Bildbeschreibung ein

Code: Select all

 .main-container {
position: relative;
height: 100dvh;
overflow: hidden;
isolation: isolate;
z-index: 2;
view-transition-name: main;
}

Code: Select all

  .bottomBar_wrapper {
position: relative;
overflow: hidden;
border-top: var(--theme-nav-border);
isolation: isolate;
z-index: 3;
view-transition-name: bottom-navigation;
}

.bottomBar_wrapper::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
isolation: isolate;
background: var(--theme-bottom-navbar-background-before) !important;
backdrop-filter: var(--theme-nav-backdrop-filter-blur) !important;
-webkit-backdrop-filter: var(--theme-nav-backdrop-filter-blur) !important;
}

.bottomBar_wrapper::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 100;
isolation: isolate;
background: var(--theme-bottom-navbar-background-after) !important;
}

Code: Select all

html:active-view-transition-type(forwards) {
&::view-transition-old(main) {
animation-name: slide-out-to-left;
}
&::view-transition-new(main) {
animation-name: slide-in-from-right;
}
}
html:active-view-transition-type(backwards) {
&::view-transition-old(main) {
animation-name: slide-out-to-right;
}
&::view-transition-new(main) {
animation-name: slide-in-from-left;
}
}