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;
     }