Fullscreen stretches elements and breaks aspect ratio




7 years ago
3 months ago


(Reporter: azakai, Unassigned)


Firefox Tracking Flags

(Not tracked)




7 years ago
Fullscreen mode in Firefox stretches the fullscreened element to fit the screen, possibly altering the aspect ratio. The spec doesn't seem to say what should be done, and Chrome's behavior here is very different, it makes the element the only thing rendered but does not resize it at all, so there is often a lot of empty space around the element.

Another possibility is to stretch the element, but not to break aspect ratio, in other words, to keep the aspect ratio and scale up as much as possible, possibly leaving black bars on the sides (or top and bottom). That is definitely the behavior games want, for example.


7 years ago
Blocks: gecko-games
Component: Graphics → DOM
QA Contact: thebes → general
Seems like you really want both options.. games that need a specific aspect ratio would want to preserve it, while others would want to just get the full size of the screen.
The fullscreen draft spec [1] defines that the fullscreen element should be stretched, i.e. it should have the following CSS rules applied:

*|*:fullscreen {
  top:0; right:0; bottom:0; left:0;

So we're in line with the spec and Chrome isn't.

You could achieve what you want with the existing implementation in JS by have your fullscreen element as an ancestor of your <canvas>, and in your "fullscreenchange" handler resizing the canvas while preserving the aspect ratio.

Plus, I imagine there are cases which *don't* want to preserve the aspect ratio while scaling, so I'm thinking this bug should be WONTFIX for that reason.

[1] http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#css-pc-fullscreen

Comment 3

7 years ago
Oh ok, I missed that in the spec.

In "onfullscreenchange" do I get the size the element has been stretched to? (So I can resize the enclosed canvas as per your suggestion?)
You will once I land bug 756334, which I'm working on right now, then yes. Currently on some platforms the fullscreenchange event can arrive before the transition is complete, so the window dimensions aren't stable yet.

Comment 5

7 years ago
Ok, sounds great. Let's close this.
Last Resolved: 7 years ago
Resolution: --- → WONTFIX
(In reply to Alon Zakai (:azakai) from comment #3)
> Oh ok, I missed that in the spec.
> In "onfullscreenchange" do I get the size the element has been stretched to?
> (So I can resize the enclosed canvas as per your suggestion?)

Is a resize event sent when the fullscreen happens?
No longer blocks: gecko-games
Over the weekend an issue occurred with the BMO database which resulted in duplication of dependencies. The dependency issue may have resulted in "Depends On" and "Blocks" values being removed while updating a bug. This issue should now be resolved, however dependencies may need to be manually restored to some bugs.

This bug had dependencies removed during the failure period and will need verification that the dependency removal(s) were intentional. Please help out by taking a look at this bug and adding anything back that was mistakenly removed.
Component: DOM → DOM: Core & HTML
Product: Core → Core
You need to log in before you can comment on or make changes to this bug.