From a992695327488035ae144c3f1db4f4aed2006121 Mon Sep 17 00:00:00 2001 From: Konstantin Fastov Date: Tue, 13 Jan 2026 11:02:41 +0700 Subject: [PATCH 1/3] Use viewport size for fullscreen canvas sizing --- src/lib/libbrowser.js | 12 +++++++++++- src/lib/libhtml5.js | 38 ++++++++++++++++++++++++++++++++++++-- 2 files changed, 47 insertions(+), 3 deletions(-) diff --git a/src/lib/libbrowser.js b/src/lib/libbrowser.js index 6d60a4bd9ad55..19d701415cbf6 100644 --- a/src/lib/libbrowser.js +++ b/src/lib/libbrowser.js @@ -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); } diff --git a/src/lib/libhtml5.js b/src/lib/libhtml5.js index d52250aab6cec..9c8bd12b3b551 100644 --- a/src/lib/libhtml5.js +++ b/src/lib/libhtml5.js @@ -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) { @@ -1132,8 +1147,27 @@ 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 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; From 1df21aa92a1c8348291fb4d609c42ba5ffc9c618 Mon Sep 17 00:00:00 2001 From: Konstantin Fastov Date: Tue, 13 Jan 2026 15:54:50 +0700 Subject: [PATCH 2/3] Fix restore state on fullscreen resize --- src/lib/libhtml5.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/lib/libhtml5.js b/src/lib/libhtml5.js index 9c8bd12b3b551..c790f40a9da36 100644 --- a/src/lib/libhtml5.js +++ b/src/lib/libhtml5.js @@ -1223,6 +1223,9 @@ var LibraryHTML5 = { $registerRestoreOldStyle__deps: ['$getCanvasElementSize', '$setCanvasElementSize', '$currentFullscreenStrategy'], $registerRestoreOldStyle: (canvas) => { + if (canvas.__emscriptenRestoreOldStyle) { + return canvas.__emscriptenRestoreOldStyle; + } var canvasSize = getCanvasElementSize(canvas); var oldWidth = canvasSize[0]; var oldHeight = canvasSize[1]; @@ -1284,6 +1287,7 @@ var LibraryHTML5 = { #endif {{{ makeDynCall('iipp', 'currentFullscreenStrategy.canvasResizedCallback') }}}({{{ cDefs.EMSCRIPTEN_EVENT_CANVASRESIZED }}}, 0, currentFullscreenStrategy.canvasResizedCallbackUserData); } + canvas.__emscriptenRestoreOldStyle = null; } } document.addEventListener('fullscreenchange', restoreOldStyle); @@ -1291,6 +1295,7 @@ var LibraryHTML5 = { // As of Safari 13.0.3 on macOS Catalina 10.15.1 still ships with prefixed webkitfullscreenchange. TODO: revisit this check once Safari ships unprefixed version. document.addEventListener('webkitfullscreenchange', restoreOldStyle); #endif + canvas.__emscriptenRestoreOldStyle = restoreOldStyle; return restoreOldStyle; }, From 843a6816ed888f5fc86c89c06b965fc9374490e0 Mon Sep 17 00:00:00 2001 From: Konstantin Fastov Date: Tue, 13 Jan 2026 16:58:34 +0700 Subject: [PATCH 3/3] Avoid clobbering windowed state on fullscreen resize --- src/lib/libhtml5.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/lib/libhtml5.js b/src/lib/libhtml5.js index c790f40a9da36..26c081e2cfd45 100644 --- a/src/lib/libhtml5.js +++ b/src/lib/libhtml5.js @@ -1146,7 +1146,10 @@ var LibraryHTML5 = { $JSEvents_resizeCanvasForFullscreen__deps: ['$registerRestoreOldStyle', '$getCanvasElementSize', '$setLetterbox', '$setCanvasElementSize', '$getBoundingClientRect'], $JSEvents_resizeCanvasForFullscreen: (target, strategy) => { - var restoreOldStyle = registerRestoreOldStyle(target); + var restoreOldStyle = null; + if (!getFullscreenElement()) { + restoreOldStyle = registerRestoreOldStyle(target); + } var cssWidth, cssHeight; if (strategy.softFullscreen) { cssWidth = innerWidth; @@ -1223,9 +1226,6 @@ var LibraryHTML5 = { $registerRestoreOldStyle__deps: ['$getCanvasElementSize', '$setCanvasElementSize', '$currentFullscreenStrategy'], $registerRestoreOldStyle: (canvas) => { - if (canvas.__emscriptenRestoreOldStyle) { - return canvas.__emscriptenRestoreOldStyle; - } var canvasSize = getCanvasElementSize(canvas); var oldWidth = canvasSize[0]; var oldHeight = canvasSize[1]; @@ -1287,7 +1287,6 @@ var LibraryHTML5 = { #endif {{{ makeDynCall('iipp', 'currentFullscreenStrategy.canvasResizedCallback') }}}({{{ cDefs.EMSCRIPTEN_EVENT_CANVASRESIZED }}}, 0, currentFullscreenStrategy.canvasResizedCallbackUserData); } - canvas.__emscriptenRestoreOldStyle = null; } } document.addEventListener('fullscreenchange', restoreOldStyle); @@ -1295,7 +1294,6 @@ var LibraryHTML5 = { // As of Safari 13.0.3 on macOS Catalina 10.15.1 still ships with prefixed webkitfullscreenchange. TODO: revisit this check once Safari ships unprefixed version. document.addEventListener('webkitfullscreenchange', restoreOldStyle); #endif - canvas.__emscriptenRestoreOldStyle = restoreOldStyle; return restoreOldStyle; },