[Bug 27162] New: Browser differences in graphical layout of fullscreen mode.

https://www.w3.org/Bugs/Public/show_bug.cgi?id=27162

            Bug ID: 27162
           Summary: Browser differences in graphical layout of fullscreen
                    mode.
           Product: WebAppsWG
           Version: unspecified
          Hardware: PC
                OS: Windows NT
            Status: NEW
          Severity: normal
          Priority: P2
         Component: Fullscreen
          Assignee: annevk@annevk.nl
          Reporter: jujjyl@gmail.com
        QA Contact: public-webapps-bugzilla@w3.org
                CC: mike@w3.org, public-webapps@w3.org

The Fullscreen API has become ubiquitously supported in Firefox, Chrome, Opera,
IE11 and Safari. However developing cross-browser applications that use this
feature is extremely painful, because different browsers implement the spec
differently.

The Fullscreen API spec does not fully specify how graphical presentation
should occur (or if it does, I'm not enough of a spec wizard to read what the
correct behavior is), so it is difficult to report bugs to different browser
bug trackers to convince that they should change their behavior since
https://fullscreen.spec.whatwg.org doesn't have a strong documentation.

I've recently been implementing fullscreen mode support for use in the
Emscripten environment, and wrote up a test case for Fullscreen mode
management, which can be run live at
https://dl.dropboxusercontent.com/u/40949268/emcc/bugs/fullscreen_canvas.html

While writing that, I found several differences that one needs to account for,
here's a list of current ones:

1. Both Firefox and IE11 resize the CSS size of the element to cover the whole
screen. Chrome and Safari instead don't change the CSS size at all, but simply
position the element to the center of the screen unscaled.

2. As a result of that, FF and IE11 fire the JavaScript 'resize' events when
transitioning to and from fullscreen.

3. Firefox and IE11 do not preserve the aspect ratio of the content to be
displayed fullscreen, but Chrome and Safari do. The user has to pre-resize the
content to the desired size before requesting fullscreen if he wants to stretch
it to cover the full screen on Chrome and Safari as well. (using
element.style.width/height)

However it's difficult to know what the correct procedure for this resizing
should be, because there's no way to properly get the size of the screen before
one has transitioned to fullscreen mode. The nonstandard screen.width and
screen.height seem to be the closest, but unfortunately those are fundamentally
broken when run on a device where window.devicePixelRatio is a fractional
number (see https://bugzilla.mozilla.org/show_bug.cgi?id=1024493 ), and there
does not exist an alternative way, except to do a test where one hides all DOM
contents, then creates a <div style="width:100%; height:100%;"> and then calls
.getBoundingClientRect() on that. However that is an extremely intrusive way,
and one cannot even cache the results of that because of multimonitor setups,
so a better solution is needed.

4. Because one needs to resize the CSS size manually to exact fullscreen size
for unified cross-browser behavior, then the only way to implement aspect ratio
control is to use padding, margin or borders to add letterboxes to the sides.
Here the specification does not explicitly say how those should be treated, and
the current browsers also behave differently:

   - Both Firefox or Chrome ignore the margin properties on the element, and
display the element in fullscreen without the margin. IE11 instead does display
the margin as a part of the fullscreen.
   - If padding is present, IE11 computes the displayed size differently
compared to Firefox and Chrome. FF and Chrome compute padding as a part of the
CSS size, so if the CSS size is 1920x1080px, and padding-left and right is set
to 460px, and padding-top and bottom are set to 40px, then both FF and Chrome
will show a rectangle of 1000px x 1000px of actual content. IE11 instead sums
these up and then stretches the results, so it will show a (1920+2*460) x (1080
+ 2*80) px element stretched to fit inside the fullscreen window. This makes it
impossible to use padding to implement cross-browser aspect ratio control.
   - If a border is present, Firefox and Chrome disagree on how the content
should be rendered.

Because of all these differences, currently the best scheme is to detect the
browser user agent, and if using IE11, use margin to specify aspect ratio, and
on all other browsers, use padding.

5. Given padding/margin in the element that is put to fullscreen, Firefox will
always display the letterbox area in black color. Chrome will instead use the
backgroundColor property of the element (default = white). IE11 instead will
use the backgroundColor property of the document body element (default =
white).

6. Browsers don't agree on what should happen if the content is resized _after_
it has already been transitioned to fullscreen mode. For example Chrome ignores
adjustments to element padding if it's done in the fullscreenchange event
handler.

For background information, visit
https://github.com/kripken/emscripten/issues/2556

I'd be happy to start filing bugs to different browser trackers on all of these
differences I'm seeing, but I don't know what is the correct and authoritative
behavior among all of these differences that exist, so posting bugs does not
sound reasonable.

Are these differences something that are expected to be unspecified behavior,
or do those sound like spec bugs?

-- 
You are receiving this mail because:
You are on the CC list for the bug.

Received on Friday, 24 October 2014 18:22:59 UTC