Landscape to portrait view is causing empty space on the page

I came across this empty space issue on my site and noticed it is caused by fullpage.js. I believe this issue is only happening on Safari and I’ve tested it on an iPhone 6s.

Reproduce:

  • When viewing a fullpage.js site, rotate your device to landscape view
  • Then rotate back to portrait view and notice white space on bottom of the screen

I also noticed, if you tap near the address bar the section seems to scroll back into place.

Is there anyway to prevent this from happening?

enter image description here

enter image description here

enter image description here

2 thoughts on “Landscape to portrait view is causing empty space on the page”

  1. Add the afterResize method to your Fullpage.js config options with a callback that triggers the Fullpage API’s reBuild method. In vanilla JS, that would look like this:

    new fullpage('#fullpage', {
      afterResize() {
        const fp = document.querySelector('#fullpage')
        fp.fullpage_api.reBuild();
      }
    });
    

    In React, it would look like this:

    class FullpageWrapper extends React.Component {
      afterResize() {
        this.fp.fullpageApi.reBuild();
      }
    
      render() {
        return (
          <ReactFullpage ref={el => this.fp = el}>
        )
      }
    }
    
    Reply

Leave a Comment