Issue 583224 in chromium: Fullscreen CSS layout is badly broken

[chro...@googlecode.com]

Status: Unconfirmed
Owner: ----
Labels: Cr-Blink Pri-2 Via-Wizard Type-Bug OS-Mac

New issue 583224 by a...@bellandwhistle.net: Fullscreen CSS layout is badly
broken
https://code.google.com/p/chromium/issues/detail?id=583224

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2637.0 Safari/537.36

Example URL:

Steps to reproduce the problem:
1. Open the reduced test case, attached.
2. Open the inspector.
3. Click the "Go Fullscreen" button on the page.

What is the expected behavior?
User should see the same basic layout, maximized across the user's screen.

What went wrong?
Many problems:

1) The page goes black, except for the "Go Fullscreen" button, which is in
the center of the screen. This is just wrong.

2) The pink and blue background areas are no longer rendered at all.

3) The UA stylesheet is applying this style:

:-webkit-full-screen-ancestor:not(iframe) {
z-index: auto;
position: static;
opacity: 1;
transform: none;
-webkit-filter: none;
-webkit-box-reflect: none;
perspective: none;
transform-style: flat;
-webkit-mask: none !important;
transition: none !important;
}

to the ancestors of the clicked button. Note that these styles are not
being applied to the ancestors of the "Exit Fullscreen" button. This seems
wrong. MDN says this sort of thing applies to "all ancestors of the
fullscreen element", not all ancestors of the initiating (button) element
clicked by the user. If the fullscreen element is the html element, and
it's not an iframe, there should be no "ancestors" at all.

https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-full-screen-ancestor

Per the spec, the fullscreen flag on the ancestor but not root elements
should not be set in this case:

https://fullscreen.spec.whatwg.org/#fullscreen-element

Broken transitions to and from fullscreen layout are especially hard
because when users add an app to the homescreen, and there is a glitch or
error after many hours of usage (very probable), there is no easy way to
reload the page if the URL bar is hidden. Users have to power button
on/off, open the browser, and re-enter the URL in order to relaunch. I
can't expect that. So I am now in the position of having to
remove "display": "standalone" from a manifest because I don't want to let
users into fullscreen where all hell breaks loose in terms of layout. With
things in this state, I don't even know where to begin in terms of styling
workarounds.

On a separate note, I would like to make a plea for avoiding "!important"
rules in UA stylesheets. They are onerous to work around.

Thanks!

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No

Did this work before? N/A

Does this work in other browsers? Yes

Chrome version: 50.0.2637.0 Channel: canary
OS Version: OS X 10.11.3
Flash Version: Shockwave Flash 20.0 r0

Attachments:
fullscreen-chrome-css.html 973 bytes

--
You received this message because this project is configured to send all
issue notifications to this address.
You may adjust your notification preferences at:
https://code.google.com/hosting/settings

[chro...@googlecode.com]

Comment #3 on issue 583224 by robho...@chromium.org: Fullscreen CSS layout

is badly broken
https://code.google.com/p/chromium/issues/detail?id=583224

I see similar behaviour in Firefox. Both Blink and Gecko treat the source
of the full-screen request as the target of the event in the event handler,
no matter what element in the dom the listener calls it on.

This seems wrong to me - eae@ who would know?

[chro...@googlecode.com]

Updates:
Cc: robho...@gmail.com e...@chromium.org

Comment #4 on issue 583224 by robho...@chromium.org: Fullscreen CSS layout

is badly broken
https://code.google.com/p/chromium/issues/detail?id=583224

When using requestFullScreen it seems like its common practice to make the
document the target of the eventHandler, and otherwise use the element you
want to fullscreen as your target.