Full screen is not working in Safari

Question

Full screen is working in chrome and other browsers but not working in Safari. Here is my code:

var doc = window.document;
var docEl = document.getElementById("divId");      
//doc.documentElement;

var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement){
  requestFullScreen.call(docEl);
} else { 
  cancelFullScreen.call(doc);
}

<div id="divId" style="width: 300px;height:60px" > FULL SCREEN </div>

Kaiido · Answer 1 · 2023-04-08T00:39:17.767

10

It is Element.webkitRequestFullscreen, lower-case s in Fullscreen.
Only Firefox did set their vendor-prefixed version with a camel-cased FullScreen, ^{_{probably to make everyone's life harder...}}

var requestFullScreen = docEl.requestFullscreen || docEl.webkitRequestFullscreen || docEl.mozRequestFullScreen ||  docEl.msRequestFullscreen;

As a fiddle since StackSnippets' iframes don't allow fullscreen

edited Apr 08 '23 at 00:39

answered Jun 13 '18 at 09:09

Kaiido

123,334
13
219
285

2

Thanks, but not working – Gaurav Jun 13 '18 at 09:25
One thing, your js fiddle code also not opening in safari. – Gaurav Jun 13 '18 at 09:26
@GuruduttSharma which version? Works for me on 11 – Kaiido Jun 13 '18 at 09:31
Safari version in my machine is 5.1.7. My machine OS is window 7. – Gaurav Jun 13 '18 at 09:35
Stop using it right now! The last update was made in 2015, it has a lot of security breaches that won't get fixed ever. And moreover, it has nothing to do with recent versions. If you want to test your website on Safari, do it from macOS (be it in a VM) – Kaiido Jun 13 '18 at 09:38
Okay, Thanks @Kaiido – Gaurav Jun 13 '18 at 09:48

user7637745 · Answer 2 · 2018-06-22T09:17:02.487

9

The Fullscreen API is not supported in iOS Safari and has partial support in Safari: more on this.

I would recommend to check out Sindre's cross-browser wrapper, screenfull.js around the Fullscreen API, at least check out the source and get what your current project needs.

If you create a web app, that your users will install, here you can find out more about certain meta tags to specify in order to run your web app in full-screen.

edited Jun 22 '18 at 09:17

answered Jun 13 '18 at 08:38

user7637745

965
2
14
27

1

I'm using full screen functionality in angularJS web application. I have tried screenfull.js (https://github.com/sindresorhus/screenfull.js). Same this is working in chrome but not working in safari. – Gaurav Jun 13 '18 at 09:14
Do you have any [error messages](https://developer.mozilla.org/en-US/docs/Web/API/Document/onfullscreenerror), when requesting full screen in Safari? – user7637745 Jun 13 '18 at 09:19
Yes, In console two error message are: file://platform.twitter.com/widgets.js The requested URL was not found on this server. file://www.google-analytics.com/ga.js The requested URL was not found on this server. – Gaurav Jun 13 '18 at 09:22
I have removed these files from code but code is not working in safari. I think, this can be a safari browser configuration issue. – Gaurav Jun 13 '18 at 09:24

Full screen is not working in Safari

2 Answers2

Linked