862924 - Show a transition when an element enters/exits DOM fullscreen

Status: RESOLVED DUPLICATE of bug 684628

(Firefox :: General, defect)

Description

[Jared Wein [:jaws] (please needinfo? me)]

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?

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

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.

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

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?

Comment 3

[Chris Pearce [:cpearce (Not reading bugmail)]]

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.

Comment 4

[Thomas Stache]

There is also Bug 684628