Closed Bug 1125566 Opened 9 years ago Closed 9 years ago

[Android] incorrect window.innerHeight in Landscape mode

Categories

(Firefox for Android Graveyard :: General, defect)

Product:
Firefox for Android Graveyard
Component:
General
Version:
35 Branch
Platform:
All
Android
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED WORKSFORME

People

(Reporter: labratmobi, Unassigned)

References

Details

Attachments

(1 file)

Test case from comment 6
404 bytes, text/html
Details 
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.
OS: Windows 8.1 → Android
Hardware: x86_64 → All
make sure to uncheck "fullscreen" and click "Tap to Play".
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.
Product: Core → Firefox for Android
Version: 35 Branch → Firefox 35
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)
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.
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>
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
Closed: 9 years ago
Resolution: --- → WORKSFORME
Product: Firefox for Android → Firefox for Android Graveyard
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: