Bug 257695 – ScreenOrientation lock api support

• Status: RESOLVED
• Resolution: WORKSFORME
• Component: WebKit Misc.

[Daniel Rossi]

Screen orientation lock has been available in Android for 6 years. This is useful for going to landscape mode when going to html video fullscreen or WebXR session / canvas. 

With the impending support WebXR, I believe lock api is useful and of use. Will this be implemented ? I have had to build a css orientation hack fallback in a screen lock helper method. It works tilting content in portrait mode but native would be better. 


https://w3c.github.io/screen-orientation/#dom-screenorientation-lock

demo

https://danrossi.github.io/screenlock-api/test/

The support check, Safari has orientation but no lock method. 

https://github.com/danrossi/screenlock-api/blob/main/src/ScreenLockApi.js#L24

[Marcos Caceres]

Hi Daniel, The lock() method was implemented (mobile only) as part of:
https://bugs.webkit.org/show_bug.cgi?id=245804

Which Safari are you checking on?

[Daniel Rossi]

I found an experimental flag is disabled in IOS 16.5 on an Ipad, I had to turn this on. When enabling I get this error, when launching a container wrapping a video fullscreen. 

Because iPhone still doesn't support html fullscreen api, screen locking won't work as it needs fullscreen api. This is needed for WebXR features. So it's for Ipad Safari only right now. 


NotSupportedError: Apps supporting multiple scenes (multitask) cannot lock their orientation

[Marcos Caceres]

Appreciate the additional details, Daniel. 

You are absolutely right about the limitation related to full screen on iPhone. 

I’ll see if I can track down a bug for that for you (if you haven’t found it already). Once that’s working, then .lock() should automatically just work.

[Daniel Rossi]

If I make the video element fullscreen instead of the container which is what currently happens in iPhone and requires hacks to make webgl canvas elements fullscreen. It complains it's not in fullscreen. 

So expecting html fullscreen. Therefore iPhone screen locking won't work until html fullscreen api is implemented and this orientation lock api is enabled by default and not in hidden flags. 


SecurityError: Locking the screen orientation is only allowed when in fullscreen

[Daniel Rossi]

I did more research. Safari IOS 16.5 Ipad has Multi-task support. The three dots at the top. That is why screen lock is complaining and returning an error in html fullscreen. So won't work in Safari with html fullscreen enabled. 

At least the api with the flag enabled does get detected tries to work and returns a promise. It would be the screen.orientation.lock method. 

   const screenLockApi = screen.lockOrientation
        || screen.mozLockOrientation
        || screen.msLockOrientation
        || screen.orientation && screen.orientation.lock && screen.orientation.lock.bind(screen.orientation);

[Marcos Caceres]

Yes, it wont work on iPad because Safari is a muti-task app. However, it may work as an Home Screen web application once added to the Home Screen (though may still get tripped up by the full screen requirement as implemented today).

[Woody Lee]

The `Screen Orientation API (Locking / Unlocking)` flag is disabled by default, is there any schedule to enable by default?