From 0a5f8ed37ad9f455affd1e6e436f441987991df5 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 1 Jul 2020 10:09:24 +0800
Subject: [PATCH] fix(ImagePreview): longpress error on mobile safari (#6660)

---
 src/image-preview/ImagePreviewItem.js           | 16 +++++++++-------
 src/image-preview/index.less                    | 17 ++++++++++++-----
 .../test/__snapshots__/index.spec.js.snap       |  6 +++---
 src/image-preview/test/index.spec.js            |  1 +
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/image-preview/ImagePreviewItem.js b/src/image-preview/ImagePreviewItem.js
index 9937eafa9..4a296c2a8 100644
--- a/src/image-preview/ImagePreviewItem.js
+++ b/src/image-preview/ImagePreviewItem.js
@@ -38,6 +38,7 @@ export default {
       moveY: 0,
       moving: false,
       zooming: false,
+      vertical: false,
       displayWidth: 0,
       displayHeight: 0,
     };
@@ -155,7 +156,6 @@ export default {
 
       /* istanbul ignore else */
       if (this.moving || this.zooming) {
-
         stopPropagation = true;
 
         if (
@@ -220,12 +220,14 @@ export default {
       const windowRatio = windowHeight / windowWidth;
       const imageRatio = naturalHeight / naturalWidth;
 
-      if (imageRatio < windowRatio) {
-        this.displayWidth = windowWidth;
-        this.displayHeight = windowWidth * imageRatio;
-      } else {
+      this.vertical = imageRatio > windowRatio;
+
+      if (this.vertical) {
         this.displayWidth = windowHeight / imageRatio;
         this.displayHeight = windowHeight;
+      } else {
+        this.displayWidth = windowWidth;
+        this.displayHeight = windowWidth * imageRatio;
       }
     },
   },
@@ -236,11 +238,11 @@ export default {
     };
 
     return (
-      <SwipeItem>
+      <SwipeItem class={bem('swipe-item')}>
         <Image
           src={this.src}
           fit="contain"
-          class={bem('image')}
+          class={bem('image', { vertical: this.vertical })}
           style={this.imageStyle}
           scopedSlots={imageSlots}
           onLoad={this.onLoad}
diff --git a/src/image-preview/index.less b/src/image-preview/index.less
index 4a9175477..0de2d1fd8 100644
--- a/src/image-preview/index.less
+++ b/src/image-preview/index.less
@@ -9,6 +9,12 @@
 
   &__swipe {
     height: 100%;
+
+    &-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 
   &__cover {
@@ -18,13 +24,14 @@
   }
 
   &__image {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    width: 100%;
     transition-property: transform;
 
+    &--vertical {
+      width: auto;
+      height: 100%;
+    }
+
     img {
       // disable desktop browser image drag
       -webkit-user-drag: none;
diff --git a/src/image-preview/test/__snapshots__/index.spec.js.snap b/src/image-preview/test/__snapshots__/index.spec.js.snap
index 46a5a4bc7..ea96f5ab7 100644
--- a/src/image-preview/test/__snapshots__/index.spec.js.snap
+++ b/src/image-preview/test/__snapshots__/index.spec.js.snap
@@ -43,9 +43,9 @@ exports[`render image 1`] = `
 <div class="van-image-preview" name="van-fade">
   <div class="van-swipe van-image-preview__swipe">
     <div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);">
-      <div class="van-swipe-item" style="width: 0px;"></div>
-      <div class="van-swipe-item" style="width: 0px;"></div>
-      <div class="van-swipe-item" style="width: 0px;"></div>
+      <div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div>
+      <div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div>
+      <div class="van-swipe-item van-image-preview__swipe-item" style="width: 0px;"></div>
     </div>
   </div>
   <div class="van-image-preview__index">1 / 3</div>
diff --git a/src/image-preview/test/index.spec.js b/src/image-preview/test/index.spec.js
index b3485c74e..e02d8e89f 100644
--- a/src/image-preview/test/index.spec.js
+++ b/src/image-preview/test/index.spec.js
@@ -139,6 +139,7 @@ test('double click', async () => {
   const swipe = instance.$el.querySelector('.van-swipe-item');
   triggerDrag(swipe, 0, 0);
   triggerDrag(swipe, 0, 0);
+  await later();
   expect(onScale).toHaveBeenCalledWith({
     index: 0,
     scale: 2,