[BUG] Full screen Visualization does not work in Safari

[jklap]

Describe the bug
The full screen Visualization button does not work in Safari but does work just fine in Chrome.

To Reproduce
Steps to reproduce the behavior:

1. Start Safari & open JupyterLab w/graph-notebook installed
2. Run a query that would produce a Visualization such as "A simple example" in 02-Visualization/Air-Routes-Gremlin.ipynb
3. Click the "Fullscreen" button
4. Observe nothing happening

Expected behavior
The Visualization expands to full screen

Desktop (please complete the following information):

• OS: Mac Ventura 13.0.1
• Browser: Safari
• Version: 16.1

Additional context
Using latest graph-notebook release w/JupyterLab 3.5.2

The issue looks to be in widgets/src/force_widget.ts in toggleExpand(). It uses document.fullscreenElement which exists in Chrome but not Safari as Safari uses document.webkitFullscreenElement.

https://github.com/sindresorhus/screenfull shows a cross-browser approach but it should also be pretty easy to implement directly using something like:

    const elementFunc = document.documentElement as HTMLElement & {
      mozRequestFullScreen(): Promise<void>;
      webkitRequestFullscreen(): Promise<void>;
      msRequestFullscreen(): Promise<void>;
    };

    const docFunc = document as Document & {
      mozCancelFullScreen(): Promise<void>;
      webkitExitFullscreen(): Promise<void>;
      msExitFullscreen(): Promise<void>;
      webkitFullscreenElement(): Promise<void>;
    };

    const fullScreenElement =
      document.fullscreenElement ||
      document.webkitFullscreenElement ||
      document.mozFullScreenElement ||
      document.msFullscreenElement;
    const requestFullscreen =
      elementFunc.requestFullscreen ||
      elementFunc.mozRequestFullScreen ||
      elementFunc.webkitRequestFullscreen ||
      elementFunc.msRequestFullscreen;
    const exitFullscreen =
      docFunc.exitFullscreen ||
      docFunc.webkitExitFullscreen ||
      docFunc.msExitFullscreen ||
      docFunc.mozCancelFullScreen;

And then replace:

• document.fullscreenElement usage with fullscreenElement
• elem.requestFullscreen with requestFullscreen
• elem.requestFullscreen() with requestFullscreen.call(elem)
• document.exitFullscreen with exitFullScreen
• document.exitFullscreen() with exitFullscreen.call(document)

ie should end up looking something like this snippet:

...
    if ( !fullScreenElement ) {
      if ( requestFullscreen ) {
        document.addEventListener("fullscreenchange", fullscreenchange);
        requestFullscreen.call(elem);
        this.canvasDiv.style.height = "100%";
      }
    } else {
...

See here for the basis for the above code: https://stackoverflow.com/questions/54242775/angular-7-how-does-work-the-html5-fullscreen-api-ive-a-lot-of-errors

[michaelnchin]

Thank you for the bug report @jklap ! We are looking into a fix incorporating the solution you have graciously provided.

[jklap]

@michaelnchin the real thanks is to you and the team!

[michaelnchin]

The above PR has fixed this issue for the most part, though there is a remaining oddity only on Safari where the background in fullscreen is rendered black.

The CSS styling applied to :-webkit-full-screen for the graph widget element appears to not be respected. The subsequent ::backdrop setting could have also helped but is unfortunately not compatible with Safari. I've tried a few other possible solutions to get it to work, but no luck so far.

I could be missing something here, so let me know if you have additional ideas, and/or if this is satisfactory for the time being.