fix(ImagePreview): longpress error on mobile safari (#6660)

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.vertical = imageRatio > windowRatio;
-        this.displayWidth = windowWidth;
+
-        this.displayHeight = windowWidth * imageRatio;
+      if (this.vertical) {
-      } else {
         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}

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;
+    width: 100%;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
     transition-property: transform;
 
+    &--vertical {
+      width: auto;
+      height: 100%;
+    }
+
     img {
       // disable desktop browser image drag
       -webkit-user-drag: none;

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 van-image-preview__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" 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>

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,