From: Benjamin Auder <benjamin.auder@somewhere> Date: Sun, 14 Nov 2021 22:57:44 +0000 (+0100) Subject: Attempt to fix scrolling effects on smartphone (reloading page...) X-Git-Url: https://git.auder.net/variants/current/doc/css/R.css?a=commitdiff_plain;h=8022d544e472df7a213f95bd66f64d6f9cb14aaa;p=xogo.git Attempt to fix scrolling effects on smartphone (reloading page...) --- diff --git a/TODO b/TODO index 1b43f83..c0761e6 100644 --- a/TODO +++ b/TODO @@ -6,7 +6,3 @@ Checkered-Teleport ? // rem ref to bordContainer --> rethink CSS design... // TODO: Otage, Emergo, Pacosako : fonction "buildPiece(arg1, arg2)" returns HTML element with 2 SVG or SVG + number - -Bug Chrome on Android when not focused: doesn't see opponent's move. -(https://developer.chrome.com/docs/devtools/remote-debugging/ ...not working :/) -(And minor display bug: if opponent plays while we are watching game infos, need page reload - why?) diff --git a/app.js b/app.js index 5a46190..a011513 100644 --- a/app.js +++ b/app.js @@ -59,10 +59,19 @@ function toggleVisible(element) { if (elt.id != element) elt.style.display = "none"; else elt.style.display = "block"; } - if (element.id == "newGame") { - // Workaround "superposed texts" effect - inputName.focus(); - inputName.blur(); + if (element.id == "boardContainer") { + // Avoid smartphone scrolling effects (TODO?) + document.querySelector("html").style.overflow = "hidden"; + document.body.style.overflow = "hidden"; + } + else { + document.querySelector("html").style.overflow = "visible"; + document.body.style.overflow = "visible"; + if (element.id == "newGame") { + // Workaround "superposed texts" effect + inputName.focus(); + inputName.blur(); + } } } diff --git a/common.css b/common.css index 8159d76..066f9be 100644 --- a/common.css +++ b/common.css @@ -11,11 +11,17 @@ vertical-align: baseline; } +html { + height: 100%; +} + body { + height: 100%; margin: 0; - /*text-align: center;*/ background-color: #f8f8f8; font-family: Arial, Verdana, Tahoma, sans-serif; + /* https://stackoverflow.com/a/24392249/12660887 */ + position: relative; } main {