After looking into this a bit more it seems to be a Mac Catalyst issue. The HTML full screen API doesn't appear to be supported at all. If you load a page with Javascript that calls requestFullscreen on an element you will instead get a Javascript exception. You can confirm this with this simple little bit of javascript:
// Function to open fullscreen mode. Attached to a button's onclick event.
function openFullscreen()
{
//The elem is a <video> element.
var elem = document.getElementById('myvidid');
if (elem.requestFullscreen)
{
console.log('Calling requestFullscreen');
elem.requestFullscreen();
}
else if (elem.webkitRequestFullscreen)
{
console.log('Calling webkitRequestFullscreen');
elem.webkitRequestFullscreen();
}
else if (elem.msRequestFullscreen)
{
console.log('Calling msRequestFullscreen');
elem.msRequestFullscreen();
}
else
{
console.log('Calling nothing. Must be Mac Catalyst.');
}
}
If I run it on iPad the following logs out:
Calling requestFullscreen
If I run it on Mac Catalyst (Optimized for Mac) the following logs out:
Calling nothing. Must be Mac Catalyst.
If I create an AppKit target and run it works.
--
So full screen elements is just stripped out of Mac Catalyst. Doesn't matter if you set elementFullscreenEnabled on WKPreferences to YES. Hopefully it's a bug and not "intentional behavior" to make Catalyst apps less capable.