[Android] incorrect window.innerHeight in Landscape mode

RESOLVED WORKSFORME

Status

()

RESOLVED WORKSFORME
4 years ago
2 years ago

People

(Reporter: labratmobi, Unassigned)

Tracking

(Depends on: 1 bug)

35 Branch
All
Android
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

4 years ago
User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0
Build ID: 20150108202552

Steps to reproduce:

1. Visit http://labrat.mobi/games/astro_carl/ in Firefox for Android
2. Rotate screen to landscape


Actual results:

Game does not resize to fit the screen (works on Chrome) - was working fine in previous version of Firefox for Android.

Firefox returns incorrect window.innerHeight  (probably ignoring the address bar height)


Expected results:

Game should have resized to fit the screen.
(Reporter)

Updated

4 years ago
OS: Windows 8.1 → Android
Hardware: x86_64 → All
(Reporter)

Comment 1

4 years ago
make sure to uncheck "fullscreen" and click "Tap to Play".
(Reporter)

Comment 2

4 years ago
Note: This happens when fullscreen browsing is enabled in settings. 

This is annoying when you have "touchmove" mechanics in game, which makes the screen scroll.
(Reporter)

Updated

4 years ago
Component: General → General
Product: Core → Firefox for Android
Version: 35 Branch → Firefox 35
(Reporter)

Updated

4 years ago
Severity: normal → critical
Possible dupe of bug 923663, 1071620?
Severity: critical → normal
Flags: needinfo?(bugmail.mozilla)
Not quite the same as those, but probably related. I filed a meta bug to track all of these things; I don't think this is something we can fix piecemeal and it's gonna need some dedicated time and effort from somebody.
Flags: needinfo?(bugmail.mozilla)
(Reporter)

Comment 5

4 years ago
I found a work around for this.

Previously I was using style.marginTop to vertical align my game container, now changed it to style.transform = "translate(...)"

This seemed to do the trick. Game now scales properly.
Probably using translate is a good practice as well.

But there are loads games out there which use marginTop to vertical align.

Comment 6

4 years ago
A simple test case that illustrates this issue:

<html>
<head>
  <script type="text/javascript" >
    window.onresize = function(){
      document.getElementById("container").style.height = window.innerHeight + "px";
      document.title = window.innerHeight;
    };
  </script>
</head>
<body style="margin: 0px">

  <div id="container" style="
    background: linear-gradient(yellow, purple);
    width: 100%;">
  </div>
</body>
</html>

Comment 7

4 years ago
This issue is not limited to window.innerHeight, the same issue exists if I try to get the height from a container with css "height: 100%" or "top: 0px; bottom: 0px;"


<html>
<head>
  <script type="text/javascript" >
    window.onresize = function(){
      var container = document.getElementById("container");
      document.getElementById("content").style.height = getComputedStyle(container).height;
      document.title = getComputedStyle(container).height;
    };
  </script>
</head>
<body style="margin: 0px">

  <div id="container" style="
    width: 100%;
    height: 100%;">

    <div id="content" style="
      background: linear-gradient(yellow, purple);">
    </div>
  </div>

</body>
</html>
Attachment #8652380 - Attachment mime type: text/plain → text/html
Both the test case from comment 6 and the game in comment 0 seem to be working fine now in the latest Nightly build. If there are still issues please file a new bug. Thanks!
Status: UNCONFIRMED → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.