From faf0700f0c6a7de5dcbee9aa676e214e88162499 Mon Sep 17 00:00:00 2001 From: thislight Date: Tue, 22 Oct 2024 23:24:31 +0800 Subject: [PATCH] Toot: fix expansion animation on WebKit (fix #29) --- docs/devnotes.md | 6 ++++++ src/timelines/toot.module.css | 3 ++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/docs/devnotes.md b/docs/devnotes.md index bd97c7b..31f8cb9 100644 --- a/docs/devnotes.md +++ b/docs/devnotes.md @@ -41,3 +41,9 @@ export function updateAcctInf(idx: number) { ``` Ja, the code is weird, but that's the best we know. Anyway, you need new object on the path of your changed value. + +## `transition: *-block or *-inline` does not work on WebKit + +Idk why, but transition on logical directions may not work on WebKit - sometimes they work. + +Use physical directions to avoid trouble, like "margin-top, margin-bottom". diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css index 56b4d73..e58f602 100644 --- a/src/timelines/toot.module.css +++ b/src/timelines/toot.module.css @@ -8,7 +8,8 @@ &.toot { /* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */ transition: - margin-block 125ms var(--tutu-anim-curve-std), + margin-top 125ms var(--tutu-anim-curve-std), + margin-bottom 125ms var(--tutu-anim-curve-std), height 225ms var(--tutu-anim-curve-std), var(--tutu-transition-shadow); border-radius: 0;