Rellax stops working when I add a wrapper

[letmeeatbrioche]

Hello. I am trying to use Rellax in a WordPress site.

I have multiple blocks on a page with images in each one that need to parallax within each block.

I can get Rellax to work for the page in general, but when I add a wrapper while having even one block on the page makes the .rellax element not move at all. I've added overflow-y: scroll; to make the container scrollable like I saw in a separate issue about the wrapper.

Is there something I'm missing here to make this work?

PHP snippet:

<div class="foreground-image ">
  <img class="fg-img" src="<?= $foreground_image['url'] ?>" alt="<?= $foreground_image['alt'] ?>">
</div>

JavaScript snippet:

const rellaxImg = container.querySelector('.fg-img');
  rellaxImg.classList.add('rellax');
    if (rellaxImg) {
      const rellax = new Rellax(rellaxImg, {
        relativeToWrapper: true,
        wrapper: container
       });
  }

CSS snippet:

.foreground-image {
  position: relative;
  height: 100%;
  width: 60%;
  margin: 0 auto;

  /* Parallax styles */
  top: 250px;
  height: 131.6vh; /* Double the height of the viewport to enable scrolling */
  overflow-y: scroll; /* Make wrapper scrollable */
  overflow: hidden;
}

.foreground-image img {
  height: 116.7%;
  margin: 0 auto;
  display: block;
  position: absolute;
  bottom: 0px;
  width: 100%;
  object-fit: contain;
}

[letmeeatbrioche]

I found a way to achieve the affect I wanted without using a wrapper, so I'm closing this issue.