-
+
{app.title}
diff --git a/web/src/pages/login-next/card.tsx b/web/src/pages/login-next/card.tsx
index 2e04cd6ba..50ff3917b 100644
--- a/web/src/pages/login-next/card.tsx
+++ b/web/src/pages/login-next/card.tsx
@@ -16,23 +16,35 @@ const FlipCard3D = (props: IProps) => {
setIsFlipped(true);
}
}, [isLoginPage]);
-
+ const isBackfaceVisibilitySupported = () => {
+ return (
+ CSS.supports('backface-visibility', 'hidden') ||
+ CSS.supports('-webkit-backface-visibility', 'hidden') ||
+ CSS.supports('-moz-backface-visibility', 'hidden') ||
+ CSS.supports('-ms-backface-visibility', 'hidden')
+ );
+ };
return (
-
-
- {/* Front Face */}
-
- {children}
-
+ <>
+ {isBackfaceVisibilitySupported() && (
+
+
+ {/* Front Face */}
+
+ {children}
+
- {/* Back Face */}
-
- {children}
+ {/* Back Face */}
+
+ {children}
+
+
-
-
+ )}
+ {!isBackfaceVisibilitySupported() && <>{children}>}
+ >
);
};
diff --git a/web/src/pages/login-next/index.less b/web/src/pages/login-next/index.less
index 7a6c89d89..7c52f360a 100644
--- a/web/src/pages/login-next/index.less
+++ b/web/src/pages/login-next/index.less
@@ -42,6 +42,7 @@
//////////////////////////////////////////////////////////////////////////
.perspective-1000 {
perspective: 1000px;
+ -webkit-perspective: 1000px;
overflow: hidden;
min-height: 680px;
display: flex;
@@ -49,12 +50,21 @@
}
.transform-style-3d {
transform-style: preserve-3d;
+ -webkit-transform-style: preserve-3d;
transition-duration: 0.4s;
}
.backface-hidden {
backface-visibility: hidden;
+ -webkit-backface-visibility: hidden; /* Chrome、Safari */
+ -moz-backface-visibility: hidden; /* Firefox */
+ -ms-backface-visibility: hidden; /* Internet Explorer */
}
.rotate-y-180 {
transform: rotateY(180deg);
+ -webkit-transform: rotateY(180deg);
+}
+.rotate-y-0 {
+ transform: rotateY(0deg);
+ -webkit-transform: rotateY(0deg);
}