ElementRef fullscreen in Safari does not include children

[literalpie]

🐞 bug report

Affected Package

The issue is _possibly_ caused by package @angular/core

Is this a regression?

I am not aware of previous versions where this was not an issue. The issue exists with or without ivy enabled.

Description

A clear and concise description of the problem...

If you call elementRef.nativeElement.webkitRequestFullscreen on a elementRef DI'd into a component, children are not brought to fullscreen. Only direct text content of the component.

Doing the same with an elementRef taken from the template (<div #myElement></div>) works as expected, and includes all children.

🔬 Minimal Reproduction

Please see this stackblitz for a minimum reproduction. It works as expected in Chrome, but you can see the issue by clicking "component fullscreen" in Safari.

Note that you must view the stackblitz demo in a dedicated window for fullscreen to work.

🔥 Exception or Error

No visible errors

🌍 Your Environment

Angular Version:

@angular/core: 9.1

(see stackblitz for all versions)
Anything else relevant?

Safari 13.1
and:
Safari 13.2 technology preview release 105

I also saw this issue on an iPad device.

macOS Catalina

[literalpie]

It turns out the issue is caused by display: inline vs. display: block - Safari only seems to properly fullscreen elements with display: block. I don't think this is an Angular bug.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}