Add a check for a Safari bug

Drawing an SVGImageElement to a canvas goes haywire. This checks for
that behavior and warns about it, and turns off the fine-grained
selection logic.

macrovision.html

@@ -253,6 +253,8 @@
     </div>
   </div>
 
+  <img id="webkitBugTest" src="./media/test-circle.svg" style="position:absolute; top: -1000px; width: 500px; height: 500px" />
+
 </body>
 
 </html>

macrovision.js

@@ -51,6 +51,8 @@ let rulers = [];
 
 let currentRuler = undefined;
 
+let webkitCanvasBug = false;
+
 const tagDefs = {
     "anthro": "Anthro",
     "feral": "Feral",
@@ -2050,10 +2052,14 @@ function rotate(point, angle) {
 
 const testCtx = testCanvas.getContext("2d");
 function testClick(event) {
+    const target = event.target;
 
+    if (webkitCanvasBug)
+    {
+        return clickDown(target.parentElement, event.clientX, event.clientY);
+    }
     testCtx.save();
 
-    const target = event.target;
     if (rulerMode) {
         return;
     }
@@ -4333,6 +4339,21 @@ document.addEventListener("DOMContentLoaded", () => {
 
     document.querySelector("#search-box").addEventListener("change", e => doSearch(e.target.value));
 
+    // Webkit doesn't draw resized SVGs correctly. It will always draw them at their intrinsic size, I think
+    // This checks for that.
+    webkitBugTest.onload = () => {
+        testCtx.canvas.width = 500;
+        testCtx.canvas.height = 500;
+        testCtx.clearRect(0, 0, 500, 500);
+        testCtx.drawImage(webkitBugTest, 0, 0, 500, 500);
+        webkitCanvasBug = testCtx.getImageData(250, 250, 1, 1).data[3] == 0
+
+        if (webkitCanvasBug) {
+            toast("Heads up: Safari can't select through gaps or take screenshots (check the console for info!)")
+            console.log("Webkit messes up the process of drawing an SVG image to a canvas. This is important for both selecting things (it lets you click through a gap and hit something else) and for taking screenshots (since it needs to render them to a canvas). Sorry :(")
+        }
+    }
+
 });
 
 let searchText = "";

media/test-circle.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="100" height="100" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<g>
+	<circle cx="50" cy="50" r="50"/>
+</g>
+</svg>