mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

fix: active skeleton safari problem (#40692)

Browse Source
This commit is contained in:
slotDumpling 2023-02-15 16:52:48 +08:00 committed by GitHub
parent 910d0fc340
commit 6234509d18
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components/skeleton/style/index.tsx
View File

@ -10,10 +10,10 @@ export type ComponentToken = {
const skeletonClsLoading = new Keyframes(`ant-skeleton-loading`, { const skeletonClsLoading = new Keyframes(`ant-skeleton-loading`, {
'0%': { '0%': {
transform: 'translateX(-37.5%)', backgroundPosition: '100% 50%',
}, },
'100%': { '100%': {
transform: 'translateX(37.5%)', backgroundPosition: '0 50%',
}, },
}); });
@ -45,26 +45,12 @@ const genSkeletonElementAvatarSize = (size: number): CSSObject => ({
}); });
const genSkeletonColor = (token: SkeletonToken): CSSObject => ({ const genSkeletonColor = (token: SkeletonToken): CSSObject => ({
position: 'relative', background: token.skeletonLoadingBackground,
// fix https://github.com/ant-design/ant-design/issues/36444 backgroundSize: '400% 100%',
// https://monshin.github.io/202109/css/safari-border-radius-overflow-hidden/ animationName: skeletonClsLoading,
/* stylelint-disable-next-line property-no-vendor-prefix,value-no-vendor-prefix */ animationDuration: token.skeletonLoadingMotionDuration,
zIndex: 0, animationTimingFunction: 'ease',
overflow: 'hidden', animationIterationCount: 'infinite',
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: '""',
},
}); });
const genSkeletonElementInputSize = (size: number): CSSObject => ({ const genSkeletonElementInputSize = (size: number): CSSObject => ({