No way to preserve aspect ratio of elements when requesting DOM fullscreen




7 years ago
2 years ago


(Reporter: kael, Unassigned)


14 Branch
Windows 7

Firefox Tracking Flags

(Not tracked)



(3 attachments)



7 years ago
Created attachment 629728 [details]
Normal rendering to demonstrate intended aspect ratio

When requesting DOM fullscreen mode for a canvas element (via mozRequestFullScreen), the element is automatically resized to fill the entire screen, ignoring its original aspect ratio. In addition to this, there is no way to manually readjust the size of the canvas - it is locked to precisely the dimensions of the screen and seems to ignore the CSS padding and margin attributes in addition to the native width/height attributes of the canvas.

For comparison, in Google Chrome, when you enter DOM fullscreen on a canvas element, you are free to adjust its dimensions (using canvas.width/height) and the browser even helpfully centers the element on-screen for you. This is pretty much the optimal behavior in that it allows you to preserve aspect ratio if you wish (by manually setting width/height on the canvas) but still defaults to a full-screen scale.

You could potentially preserve aspect ratio using canvas transforms, but then any drawing operations could extend beyond the edges of the screen 'box' due to the fact that the canvas still occupies the entire screen. You'd have to manually draw in black letterbox rects in the correct places or use a clip or something. All of those workarounds would have negative performance consequences.

I've attached screenshots showing how DOM fullscreen behaves in Firefox 14a2 (Aurora) and Chrome 21 (Canary) respectively, along with showing a normal (non-fullscreen) rendering of the same content so you can see what the intended aspect ratio is.

I can give anyone interested in working on this bug access to a demo that demonstrates it; unfortunately I don't have permission to make the demo public or make its URL publicly viewable in this bug.

Comment 1

7 years ago
Created attachment 629729 [details]
Fullscreen rendering in Firefox

Comment 2

7 years ago
Created attachment 629730 [details]
Fullscreen rendering in Chrome
Note that I believe our current behavior is what the spec requires.  So you're really looking for new spec text here (and in particular you need to be able to describe your desired behavior in terms that can go into a spec).

Comment 4

7 years ago
Sorry, am I reading the wrong spec? Here's what the as of June 2 version I just looked at says:

It is not rendered if it, or an ancestor, has the display property set to none.

If its specified position property is static, it computes to absolute.

Its outline, if any, is to be rendered before step 10 in the painting order.

Unless overridden by another specification, its static position for left, right, and top is zero."""

Out of that the only behavior I can see being suggested is that width should be ignored. It does not seem to suggest that height should be ignored, nor that margin or padding should be ignored. And it explicitly mentions border (which, to be fair, I have not tested as a method for letterboxing - I'll give that a try).

Comment 5

7 years ago
Also, the specification also mentions that it should default to 'object-fit: contain' (6.4: user agent level style sheet defaults), which is specified as aspect-ratio aware ( If that part of the specification were implemented, I would be getting an aspect ratio aware fullscreen scale. Or does that CSS attribute not do anything for canvas elements? The way 'replaced elements' is defined in CSS sounds like it would include canvases, because they are images with intrinsic dimensions (of course, the dimensions are set by the width/height properties, but they are still intrinsic to the image, or more precisely, the framebuffer associated with the canvas).
You're reading the wrong part of the spec.  The relevant part of the spec is in section 6.4 and says this:

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

The only difference between that and what we do is that we set all of those to !important in the UA stylesheet.  Maybe we shouldn't....
Ah, object-fit.  We don't implement that yet.  Yes, if we implemented that things would work.

Comment 8

7 years ago
Personally I'd argue setting them to !important in the UA stylesheet is wrong. If they weren't important I could override them to get my desired behavior. I guess maybe if I set !important it'll override your !important? I should try that.

If this will 'just work' once object-fit is in, I can always wait for that.
> Personally I'd argue setting them to !important in the UA stylesheet is wrong.

If you don't, then this:

  <img src="foo" width="100" height="100">

when taken full-screen won't actually change size at all.

> I guess maybe if I set !important it'll override your !important?

In Gecko, UA !important overrides everything.
Now we have "object-fit: contain !important" on fullscreen elements, so this bug is fixed... But... actually now we have no way to not preserve aspect ratio of elements :/

We'll see whether we can remove "!important" from that rule.
Last Resolved: 2 years ago
Depends on: 1215365
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.