search

alvarotrigo / react-fullpage

Official React.js wrapper for fullPage.js https://alvarotrigo.com/react-fullpage/
GNU General Public License v3.0
1.28k stars 179 forks source link

Height issues using Next.js #356

Closed Kiran-Wicksteed closed 1 year ago

Kiran-Wicksteed commented 1 year ago

Hi there!

The only way I can get fullpage sections using Next.js is by setting my "sections" to 100vh.

This is causing issues with my app.

I've noticed that the correct height inlines in a style tag when dragging my responsive width around in chrome, but as soon as I let go, the height reverts to default.

Here are 2 sandboxes I found. 1 retains the correct height in its inline style tag and the other doesn't.

Height is 100% without additional css https://codesandbox.io/s/8lpo68lp28?file=/src/index.js:859-913

Height starts out correct but the inline styling vanishes after a second https://codesandbox.io/s/react-fullpage-js-example-forked-pxyrdw

I can't for the life of me figure out why that is (unless it's a version thing...)

Your help would be much appreciated!

Kiran-Wicksteed commented 1 year ago

To clarify: I'm trying to troubleshoot height issues I'm getting on IOS.

Everything looks great in Chrome dev tools, but on IOS sections are being sized larger than the VH. When I scroll down, I see the top of the section but the bottom gets clipped — the reverse happens when I scroll upwards...

alvarotrigo commented 1 year ago

You are loading the wrong version for the CSS file.

The latest react-fullpage.js version uses fullPage.js 4 and you are loading fullPage.js 3 on the CSS file.

Replace this:

    <link rel="stylesheet" type="text/css" href="https://unpkg.com/fullpage.js@3.0.1/dist/fullpage.min.css">

For version 4.0.12

    <link rel="stylesheet" type="text/css" href="https://unpkg.com/fullpage.js@4.0.12/dist/fullpage.min.css">