From a0e016d3b3083e106d027c3f0944133318b7706b Mon Sep 17 00:00:00 2001
From: Ethan Xu <34962267+ufec@users.noreply.github.com>
Date: Tue, 29 Aug 2023 15:40:18 +0800
Subject: [PATCH] =?UTF-8?q?fix(t-popup):=20display=E5=BD=B1=E5=93=8Dtouch?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=EF=BC=8C=E6=94=B9=E7=94=A8visibility=20(#105?=
 =?UTF-8?q?7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(t-popup): display影响touch事件，改用visibility

v-show

* test(snap-update): update snap
---
 .../__test__/__snapshots__/demo.test.jsx.snap | 24 ++++----
 .../__snapshots__/index.test.jsx.snap         |  1 +
 .../__test__/__snapshots__/demo.test.jsx.snap | 24 ++++----
 .../__snapshots__/index.test.jsx.snap         |  2 +-
 .../__test__/__snapshots__/demo.test.jsx.snap | 18 +++---
 .../__test__/__snapshots__/demo.test.jsx.snap | 56 +++++++++----------
 .../__test__/__snapshots__/demo.test.jsx.snap | 16 +++---
 .../__test__/__snapshots__/demo.test.jsx.snap | 12 ++--
 .../__test__/__snapshots__/demo.test.jsx.snap | 18 +++---
 .../__test__/__snapshots__/demo.test.jsx.snap | 12 ++--
 src/popup/popup.vue                           |  6 +-
 11 files changed, 95 insertions(+), 94 deletions(-)

diff --git a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
index c3e606d84..1e4a40d17 100644
--- a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
@@ -16,7 +16,7 @@ exports[`Calendar > Calendar baseVue demo works fine 1`] = `
       </div>
       <div
         class="t-popup t-popup--bottom"
-        style="display: none;"
+        style="visibility: hidden;"
       >
         <!--v-if-->
         
@@ -2209,7 +2209,7 @@ exports[`Calendar > Calendar customButtonVue demo works fine 1`] = `
       </div>
       <div
         class="t-popup t-popup--bottom"
-        style="display: none;"
+        style="visibility: hidden;"
       >
         <!--v-if-->
         
@@ -4403,7 +4403,7 @@ exports[`Calendar > Calendar customRangeVue demo works fine 1`] = `
       </div>
       <div
         class="t-popup t-popup--bottom"
-        style="display: none;"
+        style="visibility: hidden;"
       >
         <!--v-if-->
         
@@ -4863,7 +4863,7 @@ exports[`Calendar > Calendar customTextVue demo works fine 1`] = `
       </div>
       <div
         class="t-popup t-popup--bottom"
-        style="display: none;"
+        style="visibility: hidden;"
       >
         <!--v-if-->
         
@@ -5874,7 +5874,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
               </div>
               <div
                 class="t-popup t-popup--bottom"
-                style="display: none;"
+                style="visibility: hidden;"
               >
                 <!--v-if-->
                 
@@ -8061,7 +8061,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
               </div>
               <div
                 class="t-popup t-popup--bottom"
-                style="display: none;"
+                style="visibility: hidden;"
               >
                 <!--v-if-->
                 
@@ -10248,7 +10248,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
               </div>
               <div
                 class="t-popup t-popup--bottom"
-                style="display: none;"
+                style="visibility: hidden;"
               >
                 <!--v-if-->
                 
@@ -12460,7 +12460,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
           </div>
           <div
             class="t-popup t-popup--bottom"
-            style="display: none;"
+            style="visibility: hidden;"
           >
             <!--v-if-->
             
@@ -13434,7 +13434,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
           </div>
           <div
             class="t-popup t-popup--bottom"
-            style="display: none;"
+            style="visibility: hidden;"
           >
             <!--v-if-->
             
@@ -15621,7 +15621,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
           </div>
           <div
             class="t-popup t-popup--bottom"
-            style="display: none;"
+            style="visibility: hidden;"
           >
             <!--v-if-->
             
@@ -18198,7 +18198,7 @@ exports[`Calendar > Calendar multipleVue demo works fine 1`] = `
       </div>
       <div
         class="t-popup t-popup--bottom"
-        style="display: none;"
+        style="visibility: hidden;"
       >
         <!--v-if-->
         
@@ -20388,7 +20388,7 @@ exports[`Calendar > Calendar rangeVue demo works fine 1`] = `
       </div>
       <div
         class="t-popup t-popup--bottom"
-        style="display: none;"
+        style="visibility: hidden;"
       >
         <!--v-if-->
         
diff --git a/src/calendar/__test__/__snapshots__/index.test.jsx.snap b/src/calendar/__test__/__snapshots__/index.test.jsx.snap
index 9447e3ac5..eaa92a20e 100644
--- a/src/calendar/__test__/__snapshots__/index.test.jsx.snap
+++ b/src/calendar/__test__/__snapshots__/index.test.jsx.snap
@@ -15,6 +15,7 @@ exports[`calendar > props > : format 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
+      style="visibility: visible;"
     >
       <!--v-if-->
       
diff --git a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
index 749c8eb36..08a88eb7b 100644
--- a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
@@ -60,7 +60,7 @@ exports[`Cascader > Cascader baseVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -288,7 +288,7 @@ exports[`Cascader > Cascader keysVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -516,7 +516,7 @@ exports[`Cascader > Cascader lazyVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -741,7 +741,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--bottom"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -982,7 +982,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--bottom"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -1198,7 +1198,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--bottom"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -1439,7 +1439,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--bottom"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -1680,7 +1680,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--bottom"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -1925,7 +1925,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--bottom"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -2122,7 +2122,7 @@ exports[`Cascader > Cascader themeTabVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -2321,7 +2321,7 @@ exports[`Cascader > Cascader withTitleVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -2553,7 +2553,7 @@ exports[`Cascader > Cascader withValueVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
diff --git a/src/cascader/__test__/__snapshots__/index.test.jsx.snap b/src/cascader/__test__/__snapshots__/index.test.jsx.snap
index 79bdeafc6..c34e2ba9c 100644
--- a/src/cascader/__test__/__snapshots__/index.test.jsx.snap
+++ b/src/cascader/__test__/__snapshots__/index.test.jsx.snap
@@ -14,7 +14,7 @@ exports[`cascader > events > : pick 1`] = `
   </div>
   <div
     class="t-popup t-popup--bottom"
-    style="display: none;"
+    style="visibility: hidden;"
   >
     <!--v-if-->
     
diff --git a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
index 101d2f862..2519f2595 100644
--- a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -41,7 +41,7 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -475,7 +475,7 @@ exports[`DateTimePicker > DateTimePicker customRangeVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -844,7 +844,7 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -2072,7 +2072,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--bottom"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -2499,7 +2499,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--bottom"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -2770,7 +2770,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--bottom"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -3320,7 +3320,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--bottom"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -3692,7 +3692,7 @@ exports[`DateTimePicker > DateTimePicker timeVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -4225,7 +4225,7 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
diff --git a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
index 0636c7686..70fe27cd5 100644
--- a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
@@ -34,7 +34,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--center"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -140,7 +140,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--center"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -248,7 +248,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--center"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -341,7 +341,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--center"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -430,7 +430,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--center"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -533,7 +533,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--center"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -686,7 +686,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--center"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -844,7 +844,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--center"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -993,7 +993,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--center"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -1181,7 +1181,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--center"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -1274,7 +1274,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--center"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -1363,7 +1363,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--center"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -1477,7 +1477,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--center"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -1583,7 +1583,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--center"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -1706,7 +1706,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--center"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -1855,7 +1855,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--center"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -2027,7 +2027,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--center"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -2180,7 +2180,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--center"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -2353,7 +2353,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--center"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -2459,7 +2459,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--center"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -2565,7 +2565,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--center"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -2671,7 +2671,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--center"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -2794,7 +2794,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--center"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -2962,7 +2962,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--center"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -3068,7 +3068,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--center"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -3174,7 +3174,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--center"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -3280,7 +3280,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--center"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -3403,7 +3403,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--center"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
diff --git a/src/drawer/__test__/__snapshots__/demo.test.jsx.snap b/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
index fce62cda0..f946c6776 100644
--- a/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/drawer/__test__/__snapshots__/demo.test.jsx.snap
@@ -18,7 +18,7 @@ exports[`Drawer > Drawer baseVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--right"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -141,7 +141,7 @@ exports[`Drawer > Drawer footerVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--left"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -286,7 +286,7 @@ exports[`Drawer > Drawer iconVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--right"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -535,7 +535,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--right"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -673,7 +673,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--right"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -905,7 +905,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--left"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -1046,7 +1046,7 @@ exports[`Drawer > Drawer mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--left"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -1254,7 +1254,7 @@ exports[`Drawer > Drawer titleVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--left"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
diff --git a/src/form/__test__/__snapshots__/demo.test.jsx.snap b/src/form/__test__/__snapshots__/demo.test.jsx.snap
index 9466f88d0..6484c4690 100644
--- a/src/form/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/form/__test__/__snapshots__/demo.test.jsx.snap
@@ -397,7 +397,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
             </div>
             <div
               class="t-popup t-popup--bottom"
-              style="display: none;"
+              style="visibility: hidden;"
             >
               <!--v-if-->
               
@@ -831,7 +831,7 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
             </div>
             <div
               class="t-popup t-popup--bottom"
-              style="display: none;"
+              style="visibility: hidden;"
             >
               <!--v-if-->
               
@@ -2125,7 +2125,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                   </div>
                   <div
                     class="t-popup t-popup--bottom"
-                    style="display: none;"
+                    style="visibility: hidden;"
                   >
                     <!--v-if-->
                     
@@ -2559,7 +2559,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                   </div>
                   <div
                     class="t-popup t-popup--bottom"
-                    style="display: none;"
+                    style="visibility: hidden;"
                   >
                     <!--v-if-->
                     
@@ -3715,7 +3715,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
             </div>
             <div
               class="t-popup t-popup--bottom"
-              style="display: none;"
+              style="visibility: hidden;"
             >
               <!--v-if-->
               
@@ -4147,7 +4147,7 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
             </div>
             <div
               class="t-popup t-popup--bottom"
-              style="display: none;"
+              style="visibility: hidden;"
             >
               <!--v-if-->
               
diff --git a/src/picker/__test__/__snapshots__/demo.test.jsx.snap b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
index 7f303211e..3f44d0234 100644
--- a/src/picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -56,7 +56,7 @@ exports[`Picker > Picker areaVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -244,7 +244,7 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -349,7 +349,7 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -560,7 +560,7 @@ exports[`Picker > Picker cascadeVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
@@ -790,7 +790,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--bottom"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -895,7 +895,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--bottom"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -1085,7 +1085,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--bottom"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -1287,7 +1287,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-popup t-popup--bottom"
-          style="display: none;"
+          style="visibility: hidden;"
         >
           <!--v-if-->
           
@@ -1467,7 +1467,7 @@ exports[`Picker > Picker titleVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="display: none;"
+      style="visibility: hidden;"
     >
       <!--v-if-->
       
diff --git a/src/popup/__test__/__snapshots__/demo.test.jsx.snap b/src/popup/__test__/__snapshots__/demo.test.jsx.snap
index 1b72c1cd8..9ba1c5afd 100644
--- a/src/popup/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/popup/__test__/__snapshots__/demo.test.jsx.snap
@@ -107,7 +107,7 @@ exports[`Popup > Popup baseVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--top"
-      style="padding: 100px; display: none;"
+      style="padding: 100px; visibility: hidden;"
     >
       <!--v-if-->
       
@@ -151,7 +151,7 @@ exports[`Popup > Popup customCloseVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--center"
-      style="width: 240px; height: 240px; display: none;"
+      style="width: 240px; height: 240px; visibility: hidden;"
     >
       <!--v-if-->
       
@@ -315,7 +315,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
           </div>
           <div
             class="t-popup t-popup--top"
-            style="padding: 100px; display: none;"
+            style="padding: 100px; visibility: hidden;"
           >
             <!--v-if-->
             
@@ -385,7 +385,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
           </div>
           <div
             class="t-popup t-popup--bottom"
-            style="height: 258px; display: none;"
+            style="height: 258px; visibility: hidden;"
           >
             <!--v-if-->
             
@@ -452,7 +452,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
           </div>
           <div
             class="t-popup t-popup--center"
-            style="width: 240px; height: 240px; display: none;"
+            style="width: 240px; height: 240px; visibility: hidden;"
           >
             <!--v-if-->
             
@@ -511,7 +511,7 @@ exports[`Popup > Popup withTitleVue demo works fine 1`] = `
     </div>
     <div
       class="t-popup t-popup--bottom"
-      style="height: 258px; display: none;"
+      style="height: 258px; visibility: hidden;"
     >
       <!--v-if-->
       
diff --git a/src/popup/popup.vue b/src/popup/popup.vue
index 406694687..ab49ed763 100644
--- a/src/popup/popup.vue
+++ b/src/popup/popup.vue
@@ -2,7 +2,7 @@
   <teleport v-if="!destroyOnClose || wrapperVisbile" :to="to" :disabled="!to">
     <t-overlay v-bind="overlayProps" :visible="innerVisible && showOverlay" @click="handleOverlayClick" />
     <transition :name="contentTransitionName" @after-enter="afterEnter" @after-leave="afterLeave">
-      <div v-show="innerVisible" :class="[name, $attrs.class, contentClasses]" :style="rootStyles">
+      <div :class="[name, $attrs.class, contentClasses]" :style="rootStyles">
         <div v-if="closeBtnNode" :class="`${name}__close`" @click="handleCloseClick">
           <t-node :content="closeBtnNode" />
         </div>
@@ -63,8 +63,8 @@ export default defineComponent({
 
     const rootStyles = computed(() => {
       const styles: Record<string, any> = {};
-
-      if (props.zIndex) {
+      styles.visibility = innerVisible.value ? 'visible' : 'hidden';
+      if (props.zIndex && innerVisible.value) {
         styles.zIndex = `${props.zIndex}`;
       }
       return { ...(context.attrs.style as Object), ...styles };