From 1485f9e5d998eb0286c2353fc7c2774e165b9a62 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 25 Sep 2024 09:39:16 +0800
Subject: [PATCH] Better feature detection for Scroll-driven animations

Ref: https://www.bram.us/2024/09/24/feature-detecting-scroll-driven-animations-you-want-to-check-for-animation-range-too/
---
 src/app.css                     | 4 ++--
 src/components/account-info.css | 2 +-
 src/components/status.css       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app.css b/src/app.css
index d3b8d838..ef6404f9 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1722,7 +1722,7 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
       0 8px 16px -8px var(--drop-shadow-color);
   }
 }
-@supports (animation-timeline: scroll()) {
+@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
   .sheet header {
     animation: header-border 1s linear both;
     animation-timeline: --sheet-scroll;
@@ -2363,7 +2363,7 @@ body > .szh-menu-container {
   }
 }
 
-@supports (animation-timeline: scroll()) {
+@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
   .header-account {
     animation: peekaboo-header 1s linear both;
     animation-timeline: scroll();
diff --git a/src/components/account-info.css b/src/components/account-info.css
index a1a26b59..18d15be4 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -585,7 +585,7 @@
     margin-top: calc(-1 * var(--banner-overlap));
   }
 
-  @supports (animation-timeline: scroll()) {
+  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
     .header-banner:not(.header-is-avatar):not(:hover):not(:active) {
       animation: bye-banner 1s linear both;
       animation-timeline: view();
diff --git a/src/components/status.css b/src/components/status.css
index a0545827..16ce1273 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -1601,7 +1601,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
     margin-top: 8px;
     padding: 8px;
 
-    @supports (animation-timeline: scroll()) {
+    @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
       animation: media-carousel-slide 1s linear both;
       animation-timeline: --media-carousel;
     }