Piing.events/bigscreen renders too wide - Githubissues

mozilla-mobile / firefox-tv

Firefox for Amazon's Fire TV

https://blog.mozilla.org/blog/2017/12/20/firefox-is-now-on-amazon-fire-tv-happy-holiday-watching/

Mozilla Public License 2.0

253 stars 108 forks source link

Piing.events/bigscreen renders too wide #2942

Open JonTheNiceGuy opened 4 years ago

JonTheNiceGuy commented 4 years ago

I was hoping to use a FireTV stick with Firefox for FireTV to act as the "big screen" for the multiplayer piing.events games.

Having created a demo account, created an "event" and added a game to the event, I navigate to piing.events/bigscreen and complete the event launch screen.

This renders the content at what appears to be 2x screen width. The calculated CSS (as seen in regular Firefox) implies that it should be rendering the body tag at 100%.

With no way to get developer tools on the browser, I can't see how to propose a fix to the piing team. Any suggestions? Thanks!

mcomella commented 4 years ago

With no way to get developer tools on the browser,

fwiw, you can use Chrome Developer Tools' Remote Debugging feature over ADB to get developer tools on the browser (though it may not be able to connect to release builds).

That being said, let me take a look...

mcomella commented 4 years ago

I'm not a web developer but I don't see anything out of the ordinary in the CSS: the computed sizes of the canvas and other divs appears to be the device's screen size (1920x1080).

Unfortunately, I don't have time to look into this further at the moment but here are some thoughts:

Does Silk do this? We discovered the system WebView does not fully support some CSS properties such as transforms (I know, it's weird and it sucks :( ) so it's possible the underlying WebView does not support the CSS properties the game's canvas relies on. Silk ships its own rendering engine, which I believe supports all of CSS, so if Silk doesn't do this it's probably the WebView's fault and not the site's. If this is the case...
- We could ship a mitigation around the unsupported CSS properties, like we've already done for some video content
- We'll be able to address this when we ship our own rendering engine, Gecko
I'm concerned that these devices are not performant enough to support the game: the browser has poor performance on the https://piing.events homepage (and crashes too, see #2943) and, when I opened bigscreen with the buggy race, the cursor and page generally seems to have very poor performance. If the poor performance reproduces on Silk, you should be able to see if it's the device or the Firefox + system WebView.

mcomella commented 4 years ago

it's possible the underlying WebView does not support the CSS properties the game's canvas relies on.

I think this is the problem. One discrepancy via the dev tools is that the <body> is 960x540 while the next level <div id="scaleContainer" is explicitly defined to be 1920x1080. It's possible the game is relying on transforms to scale the game down to the size of the body but, since the WebView does not support transforms 🙄, it's appearing larger than expected. Backing this theory up, when I changed the #scaleContainer and .pn-screen containers to 960x540 and removed the #scaleContainer transforms, it seems to roughly center the content.

If this is the case, this is not the site's fault (we should verify by testing on Silk) because they're to spec. While we can't fix the issue correctly in the short term (because it's the WebView's fault), we could try to mitigate by injecting a hack to modify the CSS or, if the site wants to, they can modify the layout specifically for Firefox for Fire TV.

In the future, we hope to solve issues like these by shipping our own rendering engine, Gecko.

mcomella commented 4 years ago

I'm concerned that these devices are not performant enough to support the game

Maybe I was seeing extra performance issues, however, because I had the dev tools attached.

palmerama commented 4 years ago

Hi @JonTheNiceGuy. Yes, at Piing we use transforms to scale a 1080p game (webGL + html/css) to fit nicely on whatever screen it's on, so it would work fine scaled down to 960x540 on desktop Chrome. That's an odd resolution though. Doesn't the firestick output 1080p?

mcomella commented 4 years ago

The Fire Stick does output 1080p but it looks like the WebView renders to 960x540 (I verified the same behavior on google.com). Perhaps it's doing scaling to increase the size of elements on the screen because TVs are usually viewed from a longer distance than monitors.