Improve scroll performance on Safari macOS

dist/sticky.compile.js

@@ -188,8 +188,8 @@ function () {
     key: "onResizeEvents",
     value: function onResizeEvents(element) {
       this.vp = this.getViewportSize();
-      element.sticky.rect = this.getRectangle(element);
-      element.sticky.container.rect = this.getRectangle(element.sticky.container);
+      element.sticky.rect = this.getRectangle(element, false);
+      element.sticky.container.rect = this.getRectangle(element.sticky.container, false);
 
       if (element.sticky.rect.top + element.sticky.rect.height < element.sticky.container.rect.top + element.sticky.container.rect.height && element.sticky.stickyFor < this.vp.width && !element.sticky.active) {
         element.sticky.active = true;
@@ -390,13 +390,13 @@ function () {
 
   }, {
     key: "getRectangle",
-    value: function getRectangle(element) {
+    value: function getRectangle(element, useAnimationFrame) {
       this.css(element, {
         position: '',
         width: '',
         top: '',
         left: ''
-      });
+      }, useAnimationFrame);
       var width = Math.max(element.offsetWidth, element.clientWidth, element.scrollWidth);
       var height = Math.max(element.offsetHeight, element.clientHeight, element.scrollHeight);
       var top = 0;
@@ -463,12 +463,28 @@ function () {
 
   }, {
     key: "css",
-    value: function css(element, properties) {
-      for (var property in properties) {
-        if (properties.hasOwnProperty(property)) {
-          element.style[property] = properties[property];
+    value: function css(element, properties, useAnimationFrame) {
+      if (typeof useAnimationFrame === 'undefined') {
+        useAnimationFrame = true;
+      }
+
+      if (!useAnimationFrame) {
+        for (var property in properties) {
+          if (properties.hasOwnProperty(property)) {
+            element.style[property] = properties[property];
+          }
         }
+
+        return;
       }
+
+      window.requestAnimationFrame(function () {
+        for (var _property in properties) {
+          if (properties.hasOwnProperty(_property)) {
+            element.style[_property] = properties[_property];
+          }
+        }
+      });
     }
   }]);
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sticky-js",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "Sticky elements",
   "main": "index.js",
   "scripts": {

src/sticky.js

@@ -172,8 +172,8 @@ class Sticky {
    onResizeEvents(element) {
     this.vp = this.getViewportSize();
 
-    element.sticky.rect = this.getRectangle(element);
-    element.sticky.container.rect = this.getRectangle(element.sticky.container);
+    element.sticky.rect = this.getRectangle(element, false);
+    element.sticky.container.rect = this.getRectangle(element.sticky.container, false);
 
     if (
       ((element.sticky.rect.top + element.sticky.rect.height) < (element.sticky.container.rect.top + element.sticky.container.rect.height))
@@ -358,8 +358,8 @@ class Sticky {
    * @param {node} element - Element which position & rectangle are returned
    * @return {object}
    */
-  getRectangle(element) {
-    this.css(element, { position: '', width: '', top: '', left: '' });
+  getRectangle(element, useAnimationFrame) {
+    this.css(element, { position: '', width: '', top: '', left: '' }, useAnimationFrame);
 
     const width = Math.max(element.offsetWidth, element.clientWidth, element.scrollWidth);
     const height = Math.max(element.offsetHeight, element.clientHeight, element.scrollHeight);
@@ -419,12 +419,28 @@ class Sticky {
    * @param {node} element - DOM element
    * @param {object} properties - CSS properties that will be added/removed from specified element
    */
-  css(element, properties) {
-    for (let property in properties) {
-      if (properties.hasOwnProperty(property)) {
-        element.style[property] = properties[property];
+  css(element, properties, useAnimationFrame) {
+
+    if (typeof(useAnimationFrame) === 'undefined') {
+      useAnimationFrame = true;
+    }
+
+    if(!useAnimationFrame) {
+      for (let property in properties) {
+        if (properties.hasOwnProperty(property)) {
+          element.style[property] = properties[property];
+        }
       }
+      return;
     }
+
+    window.requestAnimationFrame(function() {
+      for (let property in properties) {
+        if (properties.hasOwnProperty(property)) {
+          element.style[property] = properties[property];
+        }
+      }
+    })
   }
 }