Show a transition when an element enters/exits DOM fullscreen

RESOLVED DUPLICATE of bug 684628

Status

()

defect
RESOLVED DUPLICATE of bug 684628
6 years ago
6 years ago

People

(Reporter: jaws, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [parity-safari])

Safari has a real nice feature that expands the element that is going fullscreen, and shrinks the fullscreen back to the position of the element when it exits. We should investigate adding a similar transition.

As I understand it, the way that the DOM fullscreen works in Firefox is that the element has some special styles applied to it (stretching the width and height to 100%, overflow:hidden, position:absolute, and maybe some other rules).

It may be possible to achieve this effect just by setting a transition for the width and height properties, but I haven't tested this.

Chris, could you point out which files might need to be edited?
Flags: needinfo?(cpearce)
It looks like this is where these styles are defined, http://mxr.mozilla.org/mozilla-central/source/layout/style/ua.css#234, although the transition probably should be part of the Firefox theme.
Flags: needinfo?(cpearce)
Chris,

I tried adding the following styles but had no luck:

*|*:not(:root):-moz-full-screen {
  transition: width 500ms ease-out,
              height 500ms ease-out,
              left 500ms ease-out,
              right 500ms ease-out,
              top 500ms ease-out,
              bottom 500ms ease-out,
              min-width 500ms ease-out,
              min-height 500ms ease-out,
              max-width 500ms ease-out,
              max-height 500ms ease-out !important;
}

This looks to be the place where the psuedo-class is enabled for the element. Is there something that forces the transition to be instantaneous?
Flags: needinfo?(cpearce)
Summary: When an element goes fullscreen (using the DOM Fullscreen API), we should show a transition of the element growing → Show a transition when an element enters/exits DOM fullscreen
I'm a bit worried about doing this, as we'll be reflowing layout continuously during the transition, and spamming the window with resize events.

Last time I checked Apple took a screenshot of the element being made fullscreen and just stretched that during the fullscreen transition in order to avoid continuous reflow, but that looked funny since their stretch didn't preserve the aspect ratio of the image. It's been a while since I checked this though.

Having said that, I think it's worth experimenting to see what'll happen.

:-moz-full-screen is the pseudo-class you want to set a rule for, I don't know the transition syntax, so I can't be much help there.
Flags: needinfo?(cpearce)
There is also Bug 684628
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 684628
You need to log in before you can comment on or make changes to this bug.