Fix CSS grid display issue in Chrome #42

src/modules/target.js

@@ -1,5 +1,9 @@
 import { cursor, setStyle, getOriginalSource, transformCssProp } from '../utils'
 
+// Translate z-axis to fix CSS grid display issue in Chrome:
+// https://github.com/kingdido999/zooming/issues/42 
+const TRANSLATE_Z = 0
+
 export default {
   init(el, instance) {
     this.el = el
@@ -30,7 +34,7 @@ export default {
       transition: `${transformCssProp}
         ${options.transitionDuration}s
         ${options.transitionTimingFunction}`,
-      transform: `translate(${this.translate.x}px, ${this.translate.y}px)
+      transform: `translate3d(${this.translate.x}px, ${this.translate.y}px, ${TRANSLATE_Z}px)
         scale(${this.scale.x},${this.scale.y})`,
       height: `${this.rect.height}px`,
       width: `${this.rect.width}px`
@@ -56,8 +60,8 @@ export default {
 
     setStyle(this.el, {
       cursor: cursor.move,
-      transform: `translate(
-        ${this.translate.x + dx}px, ${this.translate.y + dy}px)
+      transform: `translate3d(
+        ${this.translate.x + dx}px, ${this.translate.y + dy}px, ${TRANSLATE_Z}px)
         scale(${this.scale.x + scaleExtra},${this.scale.y + scaleExtra})`
     })
   },
@@ -68,8 +72,8 @@ export default {
 
     setStyle(this.el, {
       transition: transformCssProp,
-      transform: `translate(
-        ${this.translate.x + dx}px, ${this.translate.y + dy}px)
+      transform: `translate3d(
+        ${this.translate.x + dx}px, ${this.translate.y + dy}px, ${TRANSLATE_Z}px)
         scale(${this.scale.x + scaleExtra},${this.scale.y + scaleExtra})`
     })
   },

test.html

@@ -57,13 +57,13 @@ <h4>Image zoom that makes sense.</h4>
 
       <div class="value-img">
         <a href="demo/img/journey.jpg">
-          <img src="demo/img/journey_thumbnail.jpg"
-          id="img-custom"
-          alt="journey_thumbnail" />
+          <img src="demo/img/journey_thumbnail.jpg" id="img-custom" alt="journey_thumbnail" />
         </a>
       </div>
 
-      <p><small>Options below were designed to affect the second image only.</small></p>
+      <p>
+        <small>Options below were designed to affect the second image only.</small>
+      </p>
 
       <div class="row">
         <a class="button" id="btn-fast" onclick="fast()">faster</a>
@@ -76,10 +76,9 @@ <h4>Image zoom that makes sense.</h4>
       <br>
 
       <p>
-        <em>Faced with rolling sand dunes, age-old ruins, caves and howling winds,
-          your passage will not be an easy one. The goal is to get to the mountaintop,
-          but the experience is discovering who you are, what this place is,
-          and what is your purpose.</em>
+        <em>Faced with rolling sand dunes, age-old ruins, caves and howling winds, your passage will not be an easy one. The
+          goal is to get to the mountaintop, but the experience is discovering who you are, what this place is, and what
+          is your purpose.</em>
       </p>
 
       <br>