Skip to content

Use viewport size for fullscreen canvas sizing #26097

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kfastov wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Use viewport size for fullscreen canvas sizing #26097

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a992695
Use viewport size for fullscreen canvas sizing
kfastov Jan 13, 2026
1df21aa
Fix restore state on fullscreen resize
kfastov Jan 13, 2026
843a681
Avoid clobbering windowed state on fullscreen resize
kfastov Jan 13, 2026
2ab5cc5
Merge branch 'main' into fix/fullscreen-viewport
kfastov Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion src/lib/libbrowser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -525,7 +525,17 @@ var LibraryBrowser = {
}
}
if ((getFullscreenElement() === canvas.parentNode) && (typeof screen != 'undefined')) {
var factor = Math.min(screen.width / w, screen.height / h);
var fullscreenWidth = (typeof innerWidth != 'undefined') ? innerWidth : 0;
var fullscreenHeight = (typeof innerHeight != 'undefined') ? innerHeight : 0;
if (typeof visualViewport != 'undefined' && visualViewport) {
fullscreenWidth = visualViewport.width;
fullscreenHeight = visualViewport.height;
}
if (!fullscreenWidth || !fullscreenHeight) {
fullscreenWidth = screen.width;
fullscreenHeight = screen.height;
}
var factor = Math.min(fullscreenWidth / w, fullscreenHeight / h);
w = Math.round(w * factor);
h = Math.round(h * factor);
}
Expand Down
43 changes: 40 additions & 3 deletions src/lib/libhtml5.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1104,6 +1104,21 @@ var LibraryHTML5 = {
// EMSCRIPTEN_FULLSCREEN_SCALE_DEFAULT + EMSCRIPTEN_FULLSCREEN_CANVAS_SCALE_NONE is a mode where no extra logic is performed to the DOM elements.
if (strategy.scaleMode != {{{ cDefs.EMSCRIPTEN_FULLSCREEN_SCALE_DEFAULT }}} || strategy.canvasResolutionScaleMode != {{{ cDefs.EMSCRIPTEN_FULLSCREEN_CANVAS_SCALE_NONE }}}) {
JSEvents_resizeCanvasForFullscreen(target, strategy);
var fullscreenChangeHandler = () => {
document.removeEventListener('fullscreenchange', fullscreenChangeHandler);
#if MIN_SAFARI_VERSION != TARGET_NOT_SUPPORTED
document.removeEventListener('webkitfullscreenchange', fullscreenChangeHandler);
#endif
setTimeout(() => {
if (getFullscreenElement() === target) {
JSEvents_resizeCanvasForFullscreen(target, strategy);
}
}, 0);
};
document.addEventListener('fullscreenchange', fullscreenChangeHandler);
#if MIN_SAFARI_VERSION != TARGET_NOT_SUPPORTED
document.addEventListener('webkitfullscreenchange', fullscreenChangeHandler);
#endif
}

if (target.requestFullscreen) {
Expand Down Expand Up @@ -1131,9 +1146,31 @@ var LibraryHTML5 = {

$JSEvents_resizeCanvasForFullscreen__deps: ['$registerRestoreOldStyle', '$getCanvasElementSize', '$setLetterbox', '$setCanvasElementSize', '$getBoundingClientRect'],
$JSEvents_resizeCanvasForFullscreen: (target, strategy) => {
var restoreOldStyle = registerRestoreOldStyle(target);
var cssWidth = strategy.softFullscreen ? innerWidth : screen.width;
var cssHeight = strategy.softFullscreen ? innerHeight : screen.height;
var restoreOldStyle = null;
if (!getFullscreenElement()) {
restoreOldStyle = registerRestoreOldStyle(target);
}
var cssWidth, cssHeight;
if (strategy.softFullscreen) {
cssWidth = innerWidth;
cssHeight = innerHeight;
} else if (!getFullscreenElement() && typeof screen != 'undefined') {
cssWidth = screen.width;
cssHeight = screen.height;
} else {
var viewportWidth = (typeof innerWidth != 'undefined') ? innerWidth : 0;
var viewportHeight = (typeof innerHeight != 'undefined') ? innerHeight : 0;
if (typeof visualViewport != 'undefined' && visualViewport) {
viewportWidth = visualViewport.width;
viewportHeight = visualViewport.height;
}
if ((!viewportWidth || !viewportHeight) && typeof screen != 'undefined') {
viewportWidth = screen.width;
viewportHeight = screen.height;
}
cssWidth = viewportWidth;
cssHeight = viewportHeight;
}
var rect = getBoundingClientRect(target);
var windowedCssWidth = rect.width;
var windowedCssHeight = rect.height;
Expand Down