diff --git a/index.html b/index.html
index 946408d5..0e75ee92 100644
--- a/index.html
+++ b/index.html
@@ -127,7 +127,6 @@
background-color: var(--initial-loader-bg, #0E1116);
block-size: var(--initial-loader-height, 100svh);
inline-size: 100%;
- transition: opacity 0.18s ease-out;
}
.loading-shell {
@@ -136,6 +135,7 @@
grid-template-rows: minmax(0, 1fr) auto;
block-size: 100%;
inline-size: 100%;
+ transition: opacity 0.12s ease-out, transform 0.12s ease-out;
padding:
calc(env(safe-area-inset-top, 0px) + 24px)
24px
@@ -171,8 +171,10 @@
min-block-size: clamp(72px, 14vh, 120px);
}
- .loading-complete {
+ .loading-complete .loading-shell,
+ .loading-complete #loading-timeout {
opacity: 0;
+ transform: translate3d(0, 6px, 0);
}
.loading {
diff --git a/src/App.vue b/src/App.vue
index a58ee1ab..2cc8677f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -137,7 +137,7 @@ function startBackgroundRotation() {
function animateAndRemoveLoader() {
const loadingBg = document.querySelector('#loading-bg') as HTMLElement
if (loadingBg) {
- // 先淡出启动层,再移除节点,避免 iOS 在主题容器完全接管前露出底部空白。
+ // 只收掉启动内容,背景层保持实色直到节点被移除,避免底部 safe area 先透出页面内容。
loadingBg.classList.add('loading-complete')
window.setTimeout(() => {
removeEl('#loading-bg')
@@ -145,7 +145,7 @@ function animateAndRemoveLoader() {
// 启动阶段会锁定根节点滚动,待应用布局接管后再恢复,避免首屏出现瞬时纵向滚动条。
document.documentElement.style.removeProperty('overflow')
document.body.style.removeProperty('overflow')
- }, 180)
+ }, 120)
}
}