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;