According to caniuse the fullscreen API in Safari is still prefixed. It is necessary to prefix the method name with webkit; so in Safari you have to call e.g. element.webkitRequestFullscreen() instead of element.requestFullscreen().
I use the following helper function to call the correct method or access the correct object in each browser:
The requestFullscreen() method can be used to open an element in fullscreen mode.
The method has an optional options parameter which allows to specify whether browser navigation elements are shown or not (exceptions: Firefox and Safari).
The method returns a Promise allowing you to react to the switch of fullscreen mode, and e.g. execute code after the switch (exception: Safari).
The document.exitFullscreen() method closes the fullscreen mode. Keep in mind that exitFullscreen is a method of the document object, not the element object.
The document.exitFullscreen() also returns a Promise (exception: Safari).
The object document.fullscreenElement contains a reference to the element that was opened in fullscreen mode. In Safari this object is prefixed: document.webkitFullscreenElement (exception Safari on iPhone: this object does not exist here).
Leave a comment
Replied on your own website? Send a Webmention!