[Webkit-unassigned] [Bug 141832] New: Viewport height is taller than the visible part of the document in some mobile browsers

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=141832

            Bug ID: 141832
           Summary: Viewport height is taller than the visible part of the
                    document in some mobile browsers
    Classification: Unclassified
           Product: WebKit
           Version: 528+ (Nightly build)
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: nicolas at hoizey.com

This description is a duplication from a blog post I did [1], maybe easier to read with illustrations in context:

# Description

When trying to use a 100vh CSS value to build a new interface for a game that would use the full viewport, I discovered that this full height value meant the bottom of the game interface was partialy hidden behind the browser buttons bar or below the "fold" of some mobile browsers.

I first discovered this on my iPhone 5 and iPad 2.

See in attachments what the test page [2] looks like on an iPhone 5, portrait and landscape, before and after scroll (and interface minification).

The 100vh value seems to be computed for when the browser interface is hidden, after a scroll.

There is « VIEW » in viewport, so defining it’s dimensions with hidden parts seems strange… The really sad thing is it doesn't help people trying to develop full-viewport interfaces, for games for example, but not only.

As suggested by Yoav Weiss [3], I first opened a bug in Apple Bug Reporter, got the id 19879505.

# Steps to Reproduce

- Open [2] on iOS Safari with an iPhone in portrait mode, or an iPad in portrait or landscape mode
- The bottom part of the "bottom right" box is not visible, the 100vh height container being taller than the visible part

# Expected Results

I would have expected the viewport size (and the 100vh dimension) to be equal to the visible part of the page in the browser. It’s called VIEWport after all.

I understand it means the viewport changes when the browser interface hides, but I find it better, and necessary for "full viewport" interfaces. Fullscreen API is not available either, so there is no simple way to fix this behavior.

# Actual Results

The bottom part of the "bottom right" box is not visible, the 100vh height container being taller than the visible part

# Configuration

iPhone 5 and iPad 2

# Version & Build

iOS 8.1.3 (12B466), and other versions in the iOS simulator

# Additional Notes

There is a JavaScript library that tries to fix some issues with viewport units in iOS, but it has issues too [4] 

----

[1] http://gasteroprod.com/web/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers
[2] http://lab.gasteroprod.com/vub/index-ios-issue.html
[3] https://twitter.com/yoavweiss/status/568145414320492544
[4] https://github.com/rodneyrehm/viewport-units-buggyfill/issues/13

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20150220/4bbc9a6c/attachment-0002.html>