Repository: Tencent/tdesign-mobile-vue (ts)

Issue:
[ImageViewer] 只有一张图片时不能展示
### tdesign-mobile-vue 版本

1.0.2

### 重现链接

https://stackblitz.com/edit/qc88bw-8eiaqf?file=src%2Fdemo.vue

### 重现步骤

1.0.2版本，只有一张图片时，滚动就消失；关闭也不起效

https://github.com/Tencent/tdesign-mobile-vue/assets/13745660/126b9e39-c856-4609-b2c9-559851a92a03



### 期望结果

旧版本正常效果：


https://github.com/Tencent/tdesign-mobile-vue/assets/13745660/39c59bb9-cf44-4ebf-9b3d-161f0cc8ac54



### 实际结果

_No response_

### 框架版本

Vue(3.2.0)

### 浏览器版本

Chrome(114.0.5735.198)

### 系统版本

MacOS(12.6.6 )

### Node版本

16.17.1

### 补充说明

_No response_

Pull request description:
fix(imageviewer): 只有一张图片时展示错误
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [x] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->

fix #1062

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

该功能在1.0.1版本，1.0.2对比1.0.1代码，应该是swiper组件去掉了这种情况的判断

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- fix(ImageViewer): 修复单图时预览错误

- [ ] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [x] 文档已补充或无须补充
- [x] 代码演示已提供或无须提供
- [x] TypeScript 定义已补充或无须补充
- [x] Changelog 已提供或无须提供


Patch:
diff --git a/src/popup/popup.vue b/src/popup/popup.vue
index 40669468..ab49ed76 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 };
diff --git a/src/swiper/swiper-item.vue b/src/swiper/swiper-item.vue
index f8663bf1..fa4a27a2 100644
--- a/src/swiper/swiper-item.vue
+++ b/src/swiper/swiper-item.vue
@@ -29,7 +29,9 @@ const direction = computed(() => (isVertical.value ? 'Y' : 'X'));
 const calcTranslateStyle = (index: number, activeIndex: number) => {
   const distance = root.value?.[isVertical.value ? 'offsetHeight' : 'offsetWidth'] ?? 0;
   const lastItemIndex = items.value.length - 1;
-  const step = activeIndex === lastItemIndex && index === 0 ? 1 : index - activeIndex;
+  let step = activeIndex === lastItemIndex && index === 0 ? 1 : index - activeIndex;
+
+  if (activeIndex === index) step = 0;
 
   rootStyle.value = `transform: translate${direction.value}(${step * distance}px)`;
 };


Test patch:
diff --git a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
index c3e606d8..1e4a40d1 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 9447e3ac..eaa92a20 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 749c8eb3..08a88eb7 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 79bdeafc..c34e2ba9 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 101d2f86..2519f259 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 0636c768..70fe27cd 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 fce62cda..f946c677 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 9466f88d..6484c469 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 7f303211..3f44d023 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 1b72c1cd..9ba1c5af 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-->