Closed Bug 1125566 Opened 10 years ago Closed 9 years ago

[Android] incorrect window.innerHeight in Landscape mode

Categories

(Firefox for Android Graveyard :: General, defect)

35 Branch
All
Android
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED WORKSFORME

People

(Reporter: labratmobi, Unassigned)

References

Details

Attachments

(1 file)

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

Created:
Updated:
Size: