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.

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

fix: avoid viewport height for fullscreen Reveal as it may be incorrect #10879 #11462

Merged

Conversation

ncoden
Copy link
Contributor

@ncoden ncoden commented Aug 18, 2018

Description

Prefer the top+right+bottom+left trick to make the fullscreen modal taking the whole window height and width, instead of an height based on the viewport vh as in mobile browser this CSS unit may not represent correctly the visible area.

Motivation and Context

The CSS viewport vh is the larger possible view height and does not change with the visible area height (this is an intended behavior for optimization reason).

Because of that, the modal may be taller than the visible area and the window, and is then incorrectly positioned.

Types of changes

  • Documentation
  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing
    functionality to change)

Checklist (all required):

  • I have read and follow the CONTRIBUTING document.
  • There are no other pull request similar to this one.
  • The pull request title is descriptive.
  • The template is fully and correctly filled.
  • The pull request targets the right branch (develop or develop-v...).
  • My commits are correctly titled and contain all relevant information.
  • My code follows the code style of this project.
  • I have updated the documentation accordingly to my changes (if relevant).
  • I have added tests to cover my changes (if relevant).
  • All new and existing tests passed.

foundation#10879

The CSS viewport is the larger possible view height and does not change with the visible area height. This is an intended behavior for optimization reason. See this article:

See: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html
See: foundation#10879 (comment)

Closes foundation#10879
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Full-screen Modal on iOS
1 participant