fix: 解决 Chrome 浏览器上某些情况下导致 1px 缝隙的问题

tfgzs · Aug 28, 2019 · c244766 · c244766
1 parent e999a4e
commit c244766
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/src/core/view/components/image/index.vue b/src/core/view/components/image/index.vue
@@ -10,7 +10,7 @@
       @resize="_resize" />
   </uni-image>
 </template>
-<script>
+<script>
 export default {
   name: 'Image',
   props: {
@@ -122,8 +122,13 @@ export default {
     },
     _fixSize () {
       const elWidth = this._getWidth()
-      if (elWidth) {
-        this.$el.style.height = elWidth / this.ratio + 'px'
+      if (elWidth) {
+        let height = elWidth / this.ratio
+        // fix: 解决 Chrome 浏览器上某些情况下导致 1px 缝隙的问题
+        if (typeof navigator && navigator.vendor === 'Google Inc.' && height > 10) {
+          height = Math.round(height / 2) * 2
+        }
+        this.$el.style.height = height + 'px'
         this.sizeFixed = true
       }
     },