fix: use transform translate for nipple front (#187)

yoannmoinet · Oct 10, 2022 · 52e5bd2 · 52e5bd2
1 parent 3a2e495
commit 52e5bd2
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/collection.js b/src/collection.js
@@ -461,7 +461,7 @@ Collection.prototype.processOnMove = function (evt) {
     };
 
     if (!opts.dataOnly) {
-        u.applyPosition(nipple.ui.front, nipple.frontPosition);
+        nipple.ui.front.style.transform = 'translate(' + xPosition + 'px,' + yPosition + 'px)';
     }
 
     // Prepare event's datas.

diff --git a/src/nipple.js b/src/nipple.js
@@ -128,7 +128,8 @@ Nipple.prototype.stylize = function () {
         marginLeft: -this.options.size / 4 + 'px',
         marginTop: -this.options.size / 4 + 'px',
         background: this.options.color,
-        'opacity': '.5'
+        'opacity': '.5',
+        transform: 'translate(0px, 0px)'
     };
 
     u.extend(styles.el, transitStyle);
@@ -265,12 +266,11 @@ Nipple.prototype.setPosition = function (cb, position) {
 
     var transitStyle = {};
     transitStyle.front = u.getTransitionStyle('transition',
-        ['top', 'left'], animTime);
+        ['transform'], animTime);
 
     var styles = {front: {}};
     styles.front = {
-        left: self.frontPosition.x + 'px',
-        top: self.frontPosition.y + 'px'
+        transform: 'translate(' + self.frontPosition.x + 'px,' + self.frontPosition.y + 'px)'
     };
 
     self.applyStyles(transitStyle);