From cf6426336f43324e801662af9fd397048f1567f7 Mon Sep 17 00:00:00 2001
From: Jeff <19850462+jeff-fe@users.noreply.github.com>
Date: Fri, 27 Feb 2026 09:49:53 +0800
Subject: [PATCH] style(theme-chalk): [message] resolve incorrect position
 during transition in Firefox (#23686)

* style(theme-chalk): [message] refacter center style

* style(theme-chalk): [message] refactor center style

* recover style

* fix compatible
---
 packages/theme-chalk/src/message.scss | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/theme-chalk/src/message.scss b/packages/theme-chalk/src/message.scss
index fc94852fa8..0cb8325bed 100644
--- a/packages/theme-chalk/src/message.scss
+++ b/packages/theme-chalk/src/message.scss
@@ -7,7 +7,7 @@
 }
 
 @include b(message) {
-  width: fit-content;
+  width: max-content;
   max-width: calc(100% - 32px);
   box-sizing: border-box;
   border-radius: getCssVar('border-radius-base');
@@ -35,9 +35,8 @@
   }
 
   &.is-center {
-    left: 0;
-    right: 0;
-    margin: 0 auto;
+    left: 50%;
+    transform: translateX(-50%);
   }
 
   @include when(plain) {
@@ -105,9 +104,20 @@
 .#{$namespace}-message-fade-enter-from,
 .#{$namespace}-message-fade-leave-to {
   opacity: 0;
-  transform: translateY(-100%);
+  &.is-left,
+  &.is-right {
+    transform: translateY(-100%);
 
-  &.is-bottom {
-    transform: translateY(100%);
+    &.is-bottom {
+      transform: translateY(100%);
+    }
+  }
+
+  &.is-center {
+    transform: translate(-50%, -100%);
+
+    &.is-bottom {
+      transform: translate(-50%, 100%);
+    }
   }
 }