(Support) ParallaxBanner obscuring content below it

[jcxldn]

Support

Hi, I'm trying to use a ParallaxBanner but I find that as I scroll down, it obscures text/content below it. Here's a CodeSandbox that has the same issue: https://codesandbox.io/s/react-scroll-parallax-demo-qbzmb1

Thank you,

- James

[jscottsmith]

@Prouser123 I think you accidentally wrapped the banner in a <Parallax> component. The <ParallaxBanner> handles this internally so just remove it and everything should be good.

You did this:

<Parallax translateY={[-20, 20]}>
  <ParallaxBanner style={{ aspectRatio: "2 / 1" }}>
    <ParallaxBannerLayer
      speed={-20}
      image="image.jpg"
    />
  </ParallaxBanner>
</Parallax>

Instead do this:

<ParallaxBanner style={{ aspectRatio: "2 / 1" }}>
  <ParallaxBannerLayer
    speed={-20}
    image="image.jpg"
  />
</ParallaxBanner>

Updated Codesandbox: https://codesandbox.io/s/react-scroll-parallax-demo-forked-lodpei?file=/src/App.tsx

[jcxldn]

Ah, okay.

Thank you very much!

- James