From 5f652530ed308b3725c59c17898f86893e099959 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrgen=20Mummert?= <juergen@MacBookPro.fritz.box>
Date: Sun, 5 Apr 2026 13:55:44 +0200
Subject: [PATCH] Scope view transitions to event list and prevent page shift

---
 .../templates/frontend/event_filter.html.twig | 67 ++++++++++++++++++-
 1 file changed, 65 insertions(+), 2 deletions(-)

diff --git a/contao/templates/frontend/event_filter.html.twig b/contao/templates/frontend/event_filter.html.twig
index c6bf07f..e43598f 100644
--- a/contao/templates/frontend/event_filter.html.twig
+++ b/contao/templates/frontend/event_filter.html.twig
@@ -38,12 +38,65 @@
 </div>
 
 <style>
+    .event-filter-target-list {
+        view-transition-name: event-filter-list;
+        contain: layout paint;
+    }
+
+    html {
+        scrollbar-gutter: stable both-edges;
+    }
+
+    body {
+        overflow-y: scroll;
+    }
+
+    @keyframes event-filter-vt-fade-in {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes event-filter-vt-fade-out {
+        from {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+
     @media (prefers-reduced-motion: no-preference) {
+        ::view-transition-group(root),
         ::view-transition-old(root),
         ::view-transition-new(root) {
+            animation: none;
+        }
+
+        ::view-transition-group(event-filter-list) {
             animation-duration: 240ms;
             animation-timing-function: ease;
         }
+
+        ::view-transition-old(event-filter-list),
+        ::view-transition-new(event-filter-list) {
+            animation-duration: 240ms;
+            animation-timing-function: ease;
+            mix-blend-mode: normal;
+        }
+
+        ::view-transition-old(event-filter-list) {
+            animation-name: event-filter-vt-fade-out;
+        }
+
+        ::view-transition-new(event-filter-list) {
+            animation-name: event-filter-vt-fade-in;
+        }
     }
 </style>
 
@@ -130,6 +183,7 @@
     const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     let activeViewTransition = null;
     let isViewTransitionMutation = false;
+    let hasAppliedInitialFilter = false;
     let currentFilter = { type: 'all', value: '' };
     let suppressedChangeEvents = 0;
 
@@ -437,8 +491,9 @@
         setActiveControl(filterState);
 
         const immediateVisibility = shouldMutateVisibilityImmediately();
+        const shouldAnimateLayout = immediateVisibility && hasAppliedInitialFilter;
 
-        runWithLayoutTransition(() => {
+        const mutateVisibility = () => {
             events.forEach((eventItem) => {
                 if (matches(eventItem, filterState)) {
                     showEvent(eventItem, { immediateVisibility });
@@ -446,7 +501,15 @@
                     hideEvent(eventItem, { immediateVisibility });
                 }
             });
-        });
+        };
+
+        if (shouldAnimateLayout) {
+            runWithLayoutTransition(mutateVisibility);
+        } else {
+            mutateVisibility();
+        }
+
+        hasAppliedInitialFilter = true;
 
         updateStatus(filterState);
         syncState(filterState);