I am optimizing an internet app for iPad, and I’ve encountered a difficulty with the structure shifting after toggling fullscreen mode. Right here’s what occurs:
- I allow fullscreen mode on the app (both by means of a consumer interplay or programmatically).
- Once I exit fullscreen mode, all
of the content material is shifted barely downward, leaving an unaccounted-for hole on the high of the web page. - This hole is just not seen within the DOM or CSS, and the content material on the backside of the web page is
pushed barely off-screen.
This problem solely appears to occur on iPad, in Safari. I used to be not in a position to reproduce on an iPhone or in alternate browsers on iOS. I’ve tried inspecting the DOM and viewport properties, however I can’t determine what’s inflicting the shift.
I can not share my venture, however this api demo produces the identical problem on my iPad mini sixth gen: https://davidwalsh.identify/demo/fullscreen.php
Right here is my fullscreen code:
requestFullscreen: async operate (el, retryCount, retryDelay) {
for (let i = 0; i <= retryCount - 1; i++) {
let app = doc.getElementById(el);
if (app !== null) {
if (isMobile.any()) {
strive {
if (app.requestFullscreen) {
app.requestFullscreen();
} else if (app.mozRequestFullScreen) {
app.mozRequestFullScreen();
} else if (app.webkitRequestFullscreen) {
app.webkitRequestFullscreen();
} else if (app.msRequestFullscreen) {
app.msRequestFullscreen();
}
break;
} catch (error) {
console.error('Fullscreen not allowed: ', error.message);
}
}
}
await new Promise(r => setTimeout(r, retryDelay));
}
}
exitFullscreen: operate () {
strive {
if (doc.exitFullscreen) {
doc.exitFullscreen();
} else if (doc.mozCancelFullScreen) {
doc.mozCancelFullScreen();
} else if (doc.webkitExitFullscreen) {
doc.webkitExitFullscreen();
} else if (doc.msExitFullscreen) {
doc.msExitFullscreen();
}
} catch (error) {
console.error('Fullscreen not allowed: ', error.message);
}
}I attempted setting the apple-mobile-web-app-status-bar-style meta tag to black-translucent however that modified nothing.
Any insights or workarounds could be enormously appreciated!