Develop Reference

SVG fullscreen Javascript working correctly in FireFox but not Chrome

I'm experiencing an error when trying to make an SVG tag fullscreen using Javascript on my site. I've been told by others on the team that this used to work correctly, but has broken at some point in the past. On Firefox, the code works perfectly, and the SVG image becomes fullscreen, but on Chrome, the whole page goes fullscreen, and the SVG gets moved to the bottom left corner of the screen and seems to be placed on top of some of the other elements of the page.
I'm using the following code to handle the fullscreen action, which is hooked up to a button event listener:
function fullscreen() {
var element = document.getElementById("myFullscreenSVG");
var isFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null);
if (!isFullScreen) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) { /* Firefox */
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) { /* Chrome, Safari & Opera */
element.webkitRequestFullScreen();
} else if (element.msRequestFullscreen) { /* IE/Edge */
element.msRequestFullscreen();
} else {
console.log('Failed to enter fullscreen mode on dependency visualization SVG');
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
} else {
showAlert("Exit fullscreen failed; Press [ESC] to exit");
console.log('Failed to exit fullscreen mode on dependency visualization SVG');
}
}
}
I've tried everything I could think of, such as adding CSS for webkit-fullscreen elements to make width and height 100%, position fixed, and top 0, as this seems to be what others have done, but so far nothing has worked. What might be causing this to work incorrectly on Chrome? Any ideas would be greatly appreciated.

fullscreen is not working after a breakpoint in firefox debugger or after a call to the alert function

Example of Javascript function:
function openFullscreen() {
alert ("Full Screen Active!");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
It works with the Edge browser or if the alert function is omitted. Same problem, if a breakpoint is set at the beginning of the routine.
Also noted that the following example works with Edge but not with Firefox:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_fullscreen2
Can someone tell me why this is so or am I doing something wrong?

How can I start fullscreen in safari using javascript?

I am using this code to start and stop fullscreen:
function fullscreen() {
full = document.getElementById("full");
if (!document.fullscreenElement && !document.mozFullScreen && !document.webkitIsFullScreen && !document.msFullscreenElement) {
elem = document.getElementById("body");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
It works in every browser but Safari. I read that elem.webkitRequestFullscreen(); is for Safari. So how get I this to work in Safari? Whole Website: jnnx.de/sia.html

Fullscreen is not supported in Safari for iOS. Thanks to #GenericUser

You could make a simple app and use Apple’s WebKit framework. (If it is for internal use..)

If you're using Safari with iOS 12.1+ on an iPad, the fullscreen api has been enabled but hidden behind the "webkit" prefix (webkitRequestFullscreen, webkitExitFullscreen, etc).
To enter fullscreen in this way, you must (usually) make several interactions before it activate.
This API (as far as I can tell) has not been finalised, and has some odd behaviour and quirks. Given a few months it may change or be opened up to other devices and/or browsers, but for now only works on the iOS 12.1+ version of Safari on an iPad.
On devices running iOS 12.1+, this API can be disabled/enabled through the Safari settings page under "Settings > Safari > Advanced > Experimental Features > Toggle Fullscreen API".

Fullscreen toggle doesn't work on iOS mobile/tablet (Safari, Chrome and Firefox)

I have a problem for a fullscreen mode in a webapp on iOS mobile device (iPhone and IPad, all versions).
I have a button which call a toggle fullscreen function. This function work on all devices other than iOS.
My function :
function toggleFullScreen(e) {
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement && !window.navigator.standalone) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
$('body').css({'height': screen.height});
fullSreen = true;
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}else if(document.cancelFullScreen){
document.cancelFullScreen();
}
$('body').css({'height': 'auto'});
fullSreen = false;
}
}
It does not work on Safari, Chrome and Firefox on iOS mobile/iPad, but the function is call (i try it with some alert message). I do not understand why, thx in advance !

Please try the below code. It's working fine in my system in all browsers of the iPhone.
HTML
<div class="video-banner-div">
<video class="video-bg" id="home_banner_video" playsinline="" autoplay="true" preload="">
<source src="url_of_your_video.mp4" type="video/mp4">
</video>
</div>
JS
vid = $('.video-banner-div video').get(0); // get the element of video tag
$(".full-screen-icon").on("click", function () {
// on click of the button call the toggle function
toggleFullScreen();
});
function toggleFullScreen() {
if (vid.requestFullScreen) {
vid.requestFullScreen();
} else if (vid.webkitRequestFullScreen) {
vid.webkitRequestFullScreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.msRequestFullscreen) {
vid.msRequestFullscreen();
} else if (vid.webkitEnterFullscreen) {
vid.webkitEnterFullscreen(); //for iphone this code worked
}
}

You can verify at http://caniuse.com/fullscreen that iOS Safari does not offer a API for fullscreen, check this asnwer for more information
Full screen api HTML5 and Safari (iOS 6) . But html video elements can go fullscreen.
Take a look at https://brad.is/coding/BigScreen/ , is a good lib to handle fullscreen events.

Don't quit fullscreen on click

I want an iframe to go fullscreen when i click a button. But i don't want to exit fullscreen on click. How to achieve this?
To enter fullscreen mode i use this code:
var elem = document.getElementById('gameiframe');
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
Update: seems like only Firefox quits fullscreen on click. How to turn it off ?