From 6234509d18bac1ac60fbb3f92a5b2c6a6361295a Mon Sep 17 00:00:00 2001
From: slotDumpling <67586451+slotDumpling@users.noreply.github.com>
Date: Wed, 15 Feb 2023 16:52:48 +0800
Subject: [PATCH] fix: active skeleton safari problem (#40692)

---
 components/skeleton/style/index.tsx | 30 ++++++++---------------------
 1 file changed, 8 insertions(+), 22 deletions(-)

diff --git a/components/skeleton/style/index.tsx b/components/skeleton/style/index.tsx
index d48b1167da..251f253e47 100644
--- a/components/skeleton/style/index.tsx
+++ b/components/skeleton/style/index.tsx
@@ -10,10 +10,10 @@ export type ComponentToken = {
 
 const skeletonClsLoading = new Keyframes(`ant-skeleton-loading`, {
   '0%': {
-    transform: 'translateX(-37.5%)',
+    backgroundPosition: '100% 50%',
   },
   '100%': {
-    transform: 'translateX(37.5%)',
+    backgroundPosition: '0 50%',
   },
 });
 
@@ -45,26 +45,12 @@ const genSkeletonElementAvatarSize = (size: number): CSSObject => ({
 });
 
 const genSkeletonColor = (token: SkeletonToken): CSSObject => ({
-  position: 'relative',
-  // fix https://github.com/ant-design/ant-design/issues/36444
-  // https://monshin.github.io/202109/css/safari-border-radius-overflow-hidden/
-  /* stylelint-disable-next-line property-no-vendor-prefix,value-no-vendor-prefix */
-  zIndex: 0,
-  overflow: 'hidden',
-  background: 'transparent',
-  '&::after': {
-    position: 'absolute',
-    top: 0,
-    insetInlineEnd: '-150%',
-    bottom: 0,
-    insetInlineStart: '-150%',
-    background: token.skeletonLoadingBackground,
-    animationName: skeletonClsLoading,
-    animationDuration: token.skeletonLoadingMotionDuration,
-    animationTimingFunction: 'ease',
-    animationIterationCount: 'infinite',
-    content: '""',
-  },
+  background: token.skeletonLoadingBackground,
+  backgroundSize: '400% 100%',
+  animationName: skeletonClsLoading,
+  animationDuration: token.skeletonLoadingMotionDuration,
+  animationTimingFunction: 'ease',
+  animationIterationCount: 'infinite',
 });
 
 const genSkeletonElementInputSize = (size: number): CSSObject => ({