Fix SVG positioning when we are scrolled.

diff --git a/www/css/remoteglot.css b/www/css/remoteglot.css
index 24a319a0aaf764bab42393578a7c960c60a77ec1..a928985e8b2abc19fbeb22f480e3a3ba3bfdc9d4 100644 (file)
--- a/www/css/remoteglot.css
+++ b/www/css/remoteglot.css
@@ -99,6 +99,7 @@ p {
        display: block;
        width: 100%;
        padding: 0;
+       transform: translate(0,0);  /* Make it a containing block. */
 }
 #hiddenboard {
        display: none;

diff --git a/www/js/remoteglot.js b/www/js/remoteglot.js
index 183d372f49dc5935d7a9aa42a7a90571cf3f410a..61c390f32db4e2573e04ecb4237bfdb2f47a3722 100644 (file)
--- a/www/js/remoteglot.js
+++ b/www/js/remoteglot.js
@@ -510,15 +510,13 @@ var position_arrow = function(arrow) {
        var arrow_size = arrow.arrow_size * zoom_factor;
 
        var square_width = document.querySelector(".square-a8").getBoundingClientRect().width;
-       var pos, from_y, to_y, from_x, to_x;
+       var from_y, to_y, from_x, to_x;
        if (board.orientation() === 'black') {
-               pos = document.querySelector(".square-h1").getBoundingClientRect();  // FIXME: margin?
                from_y = (arrow.from_row + 0.5)*square_width;
                to_y = (arrow.to_row + 0.5)*square_width;
                from_x = (7 - arrow.from_col + 0.5)*square_width;
                to_x = (7 - arrow.to_col + 0.5)*square_width;
        } else {
-               pos = document.querySelector(".square-a8").getBoundingClientRect();  // FIXME: margin?
                from_y = (7 - arrow.from_row + 0.5)*square_width;
                to_y = (7 - arrow.to_row + 0.5)*square_width;
                from_x = (arrow.from_col + 0.5)*square_width;
@@ -572,10 +570,10 @@ var position_arrow = function(arrow) {
        head.setAttribute("fill", arrow.fg_color);
        svg.appendChild(head);
 
-       svg.style.top = pos.top;
-       svg.style.left = pos.left;
+       svg.style.top = '2px';  /* Border for .board-b72b1. */
+       svg.style.left = '2px';
        svg.style.pointerEvents = 'none';
-       document.body.appendChild(svg);
+       document.getElementById('board').appendChild(svg);
        arrow.svg = svg;
 }