From ae76745ea22f806147a17bce28492b792266393d Mon Sep 17 00:00:00 2001
From: JarvisArt <1120886013@qq.com>
Date: Sat, 24 Dec 2022 23:36:29 +0800
Subject: [PATCH] fix: The image preview operation bar is covered during the
 animation

---
 components/image/style/index.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/components/image/style/index.tsx b/components/image/style/index.tsx
index c66720792305..a6fd56be0b62 100644
--- a/components/image/style/index.tsx
+++ b/components/image/style/index.tsx
@@ -56,7 +56,6 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
     modalMaskBg,
     paddingSM,
     imagePreviewOperationDisabledColor,
-    zIndexPopup,
     motionDurationSlow,
   } = token;
 
@@ -66,14 +65,9 @@ export const genPreviewOperationsStyle = (token: ImageToken): CSSObject => {
   return {
     [`${previewCls}-operations`]: {
       ...resetComponent(token),
-      position: 'fixed',
-      insetBlockStart: 0,
-      insetInlineEnd: 0,
-      zIndex: zIndexPopup + 1,
       display: 'flex',
       flexDirection: 'row-reverse',
       alignItems: 'center',
-      width: '100%',
       color: token.imagePreviewOperationColor,
       listStyle: 'none',
       background: operationBg.toRgbString(),
@@ -236,6 +230,13 @@ export const genImagePreviewStyle: GenerateStyle<ImageToken> = (token: ImageToke
 
     // Preview operations & switch
     {
+      [`${componentCls}-preview-operations-wrapper`]: {
+        position: 'fixed',
+        insetBlockStart: 0,
+        insetInlineEnd: 0,
+        zIndex: token.zIndexPopup + 1,
+        width: '100%',
+      },
       '&': [genPreviewOperationsStyle(token), genPreviewSwitchStyle(token)],
     },
   ];