Skip to content

document.fullscreenElement in scroll event after entering fullscreen matters for compat #74

@foolip

Description

@foolip

In https://crbug.com/680467 there is fallout from aligning the timing of document.fullscreenElement and fullscreenchange event with animation frames in https://crbug.com/402376.

On https://twitter.com/BCCI, if ones scrolls down a bit and plays a video in fullscreen, the iframe the video is in is removed from the document, leaving things in a broken-looking state. I speculate that this code tries to remove video that have scrolled out of view.

The crucial change is that in the scroll event fired after entering fullscreen, the fullscreen steps have not yet run, so to the page it looks like the page has simply been resized, causing a scroll.

I investigated current behavior:

  • In Edge 14, the scroll event is fired after the fullscreenchange event, and so naturally the fullscreen element has already changed.
  • In Firefox 54, the scroll event is fired before the fullscreenchange event when the fullscreen element has not yet changed. For some reason, it still does not get this bug on Twitter.
  • In Chrome 55 (before my changes) and Safari 10, the scroll event is fired before the fullscreenchange event, and yet the fullscreen element has already changed.

I can see a few alternatives here, in rough order of preference:

  • Apply the fullscreen state changes immediately on resize and delay only the events until animation frame timing.
  • Tweak the order of scroll and fullscreen change events in https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model
  • Introduce a document.pendingFullscreenElement that could be used by Twitter to avoid this problem.
  • Ask Twitter to keep track of whether they are entering fullscreen themselves to avoid this.
  • Suppress scroll events in fullscreen entirely.

@upsuper @jernoble @aliams

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions