1089147 - Transitioning between displaying an element in fullscreen mode displays flickering artifacts during the transition.

Status: RESOLVED INCOMPLETE

(Core :: Graphics, defect)

Description

[Jukka Jylänki]

Moving a JS element to fullscreen mode with the .requestFullscreen() function causes ugly intermediate rendering artifacts to be displayed while the transition occurs. The same happens in the transition when pressing Esc to return from fullscreen mode. These artifacts can make the user feel like the browser product is unpolished and buggy.

1. Visit https://dl.dropboxusercontent.com/u/40949268/emcc/bugs/fullscreen_canvas.html
2. Click on any of the "Fullscreen ..." buttons.
3. Observe how there are multiple glitchy view resizes and layouts occurring simultaneously, until the view "calms down" to show the content in fullscreen mode.

In comparison, try clicking on any of the "Soft Fullscreen ..." buttons. Notice how the transition is immediate without delays or any graphical artifacts.

Comment 1

[Jukka Jylänki]

Here is a camera capture taken from Firefox 40 Nightly with a Casio Exilim at 240fps, on a Asus VG278 monitor which has a 120fps panel. The playback speed has been slowed down to 10fps to get a 24x slowdown:

https://dl.dropboxusercontent.com/u/40949268/emcc/bugs/Firefox40_fullscreen_slowspeed_24x.avi

and to zoom in even further, a 240x slowdown in the form of an animated GIF when going in and out from fullscreen:

https://dl.dropboxusercontent.com/u/40949268/emcc/bugs/Firefox40_fullscreen_slowspeed_240x_in.gif
  - First the DOM element briefly maximizes to cover the whole client area of the browser window, for 4 frames.
  - Then for 5 frames, the browser client window maximizes to cover the whole screen, and the desktop shines through from underneath.
  - Then the screen backround turns black, and the element is shown in fullscreen, but with wrong size, for 4 frames.
  - The element then resizes to show correctly rendered output, for 4 frames,
  - but something happens and the element resizes back to incorrect size, for 2 frames,
  - after which the element resizes again back to the full size, this time permanently.

https://dl.dropboxusercontent.com/u/40949268/emcc/bugs/Firefox40_fullscreen_slowspeed_240x_out.gif
  - the whole browser window disappears for 4 frames, displaying the desktop background underneath.
  - then the browser window appears in windowed mode, but instead of showing the web page, the previously fullscreen element is displayed in it maximized, for 2 frames.
  - the browser window then clears itself to black, for 2 frames, during which the browser window title is not fully painted, but the canvas element is drawn on top of it.
  - the web page is then rendered to the windowed browser window, but without window frames, and the text "dropboxusercontent.com is now fullscreen" is displayed again, for 3 frames.
  - the window frames appear, and the correct windowed page is finally rendered.

In both cases there are multiple intermediate glitchy frames and relayouts of the page and the window borders etc. while the presentation "seeks" the correct form. Ideally the various intermediate repaints would be omitted.

I do want to say that I think and feel that this bug report is quite pedantic and somewhat cosmetic, and I'm not arguing that this is particularly of high priority :) However aiming for pixel perfect correct rendering of all user operations and animations at each frame does give that last few percents of polish quality, especially for games developed for the web, so I like to report these when observed, at least to raise general awareness.

Comment 2

[Gregory Pappas [:gregp]]

The test case 404s and we can't find an archive of it anywhere.

If you are still experiencing this issue, please file a new bug and attach a reduced test case directly to the bug.