Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I'm making a Blazor server app. I'm adding an event handler to enable fullscreen mode, by creating a JS function and calling it via JS interop. It works on Chrome, but it doesn't seem to work on Safari desktop.

I've made a minimal repro project. The JS functions are defined here, and the component is defined here.

Expected Behavior

Fullscreen should be able to be enabled in Blazor server event handler.

Steps To Reproduce

This is the repro repo: https://github.com/pinkplus/SafariFullscreen.

1. Clone the repo, and run dotnet run.
2. Open http://localhost:5071 in Safari. You should be able to see two buttons: "Enter fullscreen javascript" and "Enter fullscreen blazor".
3. Click the "Enter fullscreen javascript" button. You should be in fullscreen mode now. Press ESC to escape fullscreen mode.
4. Click the "Enter fullscreen blazor" button. Fullscreen mode should be enabled, but it's not.

Exceptions (if any)

No response

.NET Version

6.0.101

Anything else?

I'm using the latest Safari (15.2) on the latest macOS (12.1).

I have a feeling that this may be related to Safari's restriction. Safari may require a user gesture event so that fullscreen can be enabled. With Blazor server, requestFullscreen is probably called in a websocket event handler, so it doesn't work.