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?