search

alvarotrigo / fullPage.js

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
http://alvarotrigo.com/fullPage/
GNU General Public License v3.0
35.27k stars 7.3k forks source link

Sections over scroll on Windows when using borders and position: fixed #4240

Closed Journeytojah closed 3 years ago

Journeytojah commented 3 years ago

Description

We are building a site for a client and their content is framed around a border. It works just fine on MacOS.

On Windows, the first scroll brings section2 and parts of section3 into view, the next scroll brings the bottom section up even more, increasing with each section.

The site is being built on Wordpress using Oxygen builder, the issue can be reproduced in Codepen.

Link to isolated reproduction with no external CSS / JS

Codepen: https://codepen.io/alexkidoo/pen/ZEKOGGd

Steps to reproduce it

  1. Scroll
  2. Keep scrolling

Versions

Browser: Google Chrome, Microsoft Edge (latest) OS: Windows 10

Tested on multiple machines, worked as expected on all MacOS machines but displays the same broken behaviour on Windows machines.

Journeytojah commented 3 years ago

On another note: we tried another library (onepage-scroll) and it exhibits the same exact behaviour. This makes me think the issue is with Chrome(ium) browsers on Windows perhaps?

Onepage-scroll codepen here: https://codepen.io/alexkidoo/pen/xxdRMRN

alvarotrigo commented 3 years ago

If your concern is that the text gets cut, then you can fix that by using the paddingTop and paddingBottom options. https://codepen.io/alvarotrigo/pen/vYmyoXv

If your concern are the background images/videos getting cut, then there's no proper solution for it right now.

I'll keep this issue open as a possible future enhancement.

alvarotrigo commented 3 years ago

Well, actually this is a duplicate of https://github.com/alvarotrigo/fullPage.js/issues/2749, so I'll close this one to keep the conversation in a single place.