Attempt to fix scrolling effects on smartphone (reloading page...)

diff --git a/TODO b/TODO
index 1b43f83..c0761e6 100644 (file)
--- 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 (file)
--- 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 (file)
--- 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 {