Not working with absolute positioned layers

[Lê Trung Đô]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch parallax-js@3.1.0 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/parallax-js/dist/parallax.js b/node_modules/parallax-js/dist/parallax.js
index c14d431..64dbfe0 100644
--- a/node_modules/parallax-js/dist/parallax.js
+++ b/node_modules/parallax-js/dist/parallax.js
@@ -701,10 +701,10 @@ var Parallax = function () {
           helpers.accelerate(layer);
         }
 
-        layer.style.position = index ? 'absolute' : 'relative';
-        layer.style.display = 'block';
-        layer.style.left = 0;
-        layer.style.top = 0;
+        // layer.style.position = index ? 'absolute' : 'relative';
+        // layer.style.display = 'block';
+        // layer.style.left = 0;
+        // layer.style.top = 0;
 
         var depth = helpers.data(layer, 'depth') || 0;
         this.depthsX.push(helpers.data(layer, 'depth-x') || depth);
diff --git a/node_modules/parallax-js/src/parallax.js b/node_modules/parallax-js/src/parallax.js
index 3c345b3..2f90cbd 100644
--- a/node_modules/parallax-js/src/parallax.js
+++ b/node_modules/parallax-js/src/parallax.js
@@ -302,10 +302,10 @@ class Parallax {
         helpers.accelerate(layer)
       }
 
-      layer.style.position = index ? 'absolute' : 'relative'
-      layer.style.display = 'block'
-      layer.style.left = 0
-      layer.style.top = 0
+      // layer.style.position = index ? 'absolute' : 'relative'
+      // layer.style.display = 'block'
+      // layer.style.left = 0
+      // layer.style.top = 0
 
       let depth = helpers.data(layer, 'depth') || 0
       this.depthsX.push(helpers.data(layer, 'depth-x') || depth)

This issue body was partially generated by patch-package.

[René Roth]

This comes up from time to time and it might be worthwhile to add a few sentences to the Readme on how to solve this. Parallax by default needs one non-absolutely-positioned child element so the parent container will not collapse, but as you found out, there are ways around that.