Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Android Firefox Mobile: Rectangle on bottom of page #4085

Closed
nTraum opened this issue Oct 20, 2020 · 2 comments
Closed

Android Firefox Mobile: Rectangle on bottom of page #4085

nTraum opened this issue Oct 20, 2020 · 2 comments
Labels
fixed on dev

Comments

@nTraum
Copy link

nTraum commented Oct 20, 2020

Hi, thanks for creating this library, appreciate it a lot!

Description

I've been experiencing display issues on Firefox Mobile when using fullPage.js. At the bottom of the page a white rectangle is being displayed. I'm not sure if this is a duplicate of #4073 as it's a different browser and I don't have to flip the device for to make the issue appear. It happens with the first page load.

Notes:

  • I can't reproduce it locally on Firefox Desktop and it's emulated mobile device dev tool
  • I can't reproduce it on Android Chrome 86.0
  • The height of the white rectangle looks conspicuously close to the height of the address bar
Screenshot

image

Source code 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
     html {
       background-color: yellow;
     }
    </style>

    <script type="text/javascript" src="https://unpkg.com/fullpage.js/dist/fullpage.min.js"></script>

    <script type="stylesheet" src="https://unpkg.com/fullpage.js/dist/fullpage.min.css"></script>
    <script type="text/javascript">
     document.addEventListener('DOMContentLoaded', function(event) {
         new fullpage('#fullpage', {
         });
     });
    </script>
  </head>

  <body>
    <div id="fullpage">
      <div class="section">Section 1</div>
      <div class="section">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
      </div>
      <div class="section">Section 3</div>
      <div class="section">Section 4</div>
    </div>
  </body>
</html>

Link to isolated reproduction with no external CSS / JS

To reproduce this issue, the HTML page needs to be responsive via <meta name="viewport" content="width=device-width, initial-scale=1">, so I couldn't go with codepen.io. Here is a hosted minimal example instead:

http://debugging.studiolineatur.com/example.html

Steps to reproduce it

  1. On your Android phone, open Firefox Mobile
  2. Visit the minimal example page
  3. Notice the white rectangle on the bottom of the page

Versions

Device: One Plus 5T
OS: Android 10 (OxygenOS 10.0.0)
Browser: Firefox Mobile 81.1.5
@alvarotrigo
Copy link
Owner

Thanks for reporting it! I'll take a look at it for the next release! 👍

@alvarotrigo alvarotrigo mentioned this issue Apr 10, 2022
Merged
@alvarotrigo
Copy link
Owner

This should be fixed in v4! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
fixed on dev
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nTraum @alvarotrigo