fix: 由于某些浏览器对 :has() 选择器的支持度一般，所以开启参数进行降级 (#15855)

Co-authored-by: liuzejia <[email protected]>
NervJS · Jun 14, 2024 · a884dcb · a884dcb
1 parent 1210ede
commit a884dcb
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/packages/taro-router/src/router/page.ts b/packages/taro-router/src/router/page.ts
@@ -147,7 +147,7 @@ export default class PageHandler {
     this.pathname = history.location.pathname
     // Note: 注入页面样式
     this.animation && loadAnimateStyle(this.animationDuration)
-    loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll)
+    loadRouterStyle(this.tabBarList.length > 1, this.usingWindowScroll, this.router.enhanceAnimation)
   }
 
   onReady (page: PageInstance, onLoad = true) {
@@ -287,6 +287,7 @@ export default class PageHandler {
           this.hideTimer = null
           this.lastHidePage?.classList?.add?.('taro_page_shade')
         }
+        page.onHide?.()
         pageEl.classList.add('taro_page_shade')
         this.lastHidePage = pageEl
       }

diff --git a/packages/taro-router/src/style.ts b/packages/taro-router/src/style.ts
@@ -35,7 +35,7 @@ body {
 /**
  * 插入路由相关样式
  */
-export function loadRouterStyle (enableTabBar: boolean, enableWindowScroll: boolean) {
+export function loadRouterStyle (enableTabBar: boolean, enableWindowScroll: boolean, enhanceAnimation?: boolean) {
   const css = `
   .taro_router {
     position: relative;
@@ -65,11 +65,17 @@ ${
   }
 
 ` : ''}
-  .taro_page_shade:has(+.taro_page_stationed),
+${
+  enhanceAnimation
+    ? `.taro_page_shade:has(+.taro_page_stationed),
   .taro_page_shade.taro_tabbar_page,
   .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child):has(+.taro_page_stationed) {
     display: none;
-  }
+  }` : ` .taro_page_shade,
+  .taro_router > .taro_page.taro_page_show.taro_page_stationed:not(.taro_page_shade):not(.taro_tabbar_page):not(:last-child) {
+    display: none;
+  }`
+} 
 `
   addStyle(css)
 }

diff --git a/packages/taro-router/types/router.d.ts b/packages/taro-router/types/router.d.ts
@@ -12,6 +12,8 @@ export interface Router {
   customRoutes?: Record<string, string | string[]>
   pathname: string
   forcePath?: string
+  /** 加上这个参数，可以解决返回页面的时候白屏的问题，但是某些不支持 :has() 选择器的浏览器会有问题 */
+  enhanceAnimation?: boolean
 }
 
 export interface SpaRouterConfig extends AppConfig {

diff --git a/packages/taro/types/compile/config/h5.d.ts b/packages/taro/types/compile/config/h5.d.ts
@@ -14,6 +14,8 @@ export interface IH5RouterConfig {
   lazyload?: boolean | ((pagename: string) => boolean)
   renamePagename?: (pagename: string) => string
   forcePath?: string
+  /** 加上这个参数，可以解决返回页面的时候白屏的问题，但是某些不支持 :has() 选择器的浏览器会有问题 */
+  enhanceAnimation?: boolean
 }
 
 export interface IH5Config {