add div.cg-board-helper

[niklasf]

There is a hack to make board sizes divisible by 8 in Chrome: https://jsfiddle.net/9cgytwr5/1/

It works with absolute positioning of the pieces or by adding an additional wrapping div. This PR does the latter.

Sharp board and pieces and perfectly aligned square highlights confirmed by people in Discord (including City, who previously managed to break everything).

Combined with the following diff in lila:

diff --git a/app/templating/ChessgroundHelper.scala b/app/templating/ChessgroundHelper.scala
index e09e1c76f9..3885695085 100644
--- a/app/templating/ChessgroundHelper.scala
+++ b/app/templating/ChessgroundHelper.scala
@@ -39,7 +39,9 @@ trait ChessgroundHelper {
   )

   private def wrap(content: Frag): Frag = div(cls := "cg-board-wrap")(
-    div(cls := "cg-board")(content)
+    div(cls := "cg-board-helper")(
+      div(cls := "cg-board")(content)
+    )
   )

   lazy val miniBoardContent = wrap("")
diff --git a/ui/common/css/vendor/chessground/_chessground.scss b/ui/common/css/vendor/chessground/_chessground.scss
index 65fb2a7328..150649d26d 100644
--- a/ui/common/css/vendor/chessground/_chessground.scss
+++ b/ui/common/css/vendor/chessground/_chessground.scss
@@ -1,7 +1,17 @@
 @import 'board-2d';

+.cg-board-helper {
+  position: absolute;
+  display: table; /* round to integer size in chrome */
+  width: 12.5%;
+  height: 12.5%;
+}
+
 .cg-board {
-  @extend %box-shadow, %abs-100;
+  @extend %box-shadow;
+  position: absolute;
+  width: 800%;
+  height: 800%;
   user-select: none;
   line-height: 0;
   background-size: cover;
@@ -58,6 +68,7 @@ piece {
   height: 12.5%;
   background-size: cover;
   z-index: z('cg__piece');
+  will-change: transform;
   pointer-events: none;
   &.dragging {
     cursor: move;

[niklasf]

Works with 3D, slight issue with coordinates and resize handle position.