Apply some Safari fixes

The click-test code skips the pixel test in Safari, since
drawing SVGs to a canvas is, apparently, a buggy mess.
This also adds a bunch of -webkit-user-select properties
to make things unselectable in Safari.

macrovision.css

@@ -33,6 +33,8 @@ body {
     -moz-user-drag: none;
     -o-user-drag: none;
     pointer-events: none;
+    user-select: none;
+    -webkit-user-select: none;
 }
 
 body.smoothing .entity-box {
@@ -51,6 +53,8 @@ body.smoothing .entity-box {
     --rotation: 30deg;
     transform: translate(-50%, var(--offset)) rotate(var(--rotation));
     filter: brightness(var(--brightness));
+    user-select: none;
+    -webkit-user-select: none;
 }
 
 .entity-image.flipped {
@@ -192,6 +196,7 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
 .options-label {
     text-align: center;
     user-select: none;
+    -webkit-user-select: none;
     margin-top: 12px;
     margin-bottom: 4px;
 }
@@ -227,6 +232,7 @@ body.show-extra-options .options-block.options-block-optional {
     background: #262;
     text-decoration: none;
     user-select: none;
+    -webkit-user-select: none;
     border-radius: 6pt;
     margin: 10px;
     border-color: #666;
@@ -259,6 +265,7 @@ body.show-extra-options .options-block.options-block-optional {
 #entities {
     position: absolute;
     user-select: none;
+    -webkit-user-select: none;
     width: 100%;
     height: 100%;
 }
@@ -555,6 +562,7 @@ input[type=checkbox] {
 
 input ~ label {
     user-select: none;
+    -webkit-user-select: none;
 }
 
 body.toggle-height-bars .height-bar,
@@ -953,6 +961,7 @@ button {
 .settings-desc {
     margin-left: 8pt;
     user-select: none;
+    -webkit-user-select: none;
     flex: 1;
 }
 
@@ -965,6 +974,7 @@ button {
     font-size: 200%;
     margin-left: 8pt;
     user-select: none;
+    -webkit-user-select: none;
     max-width: 200pt;
     width: 200pt;
 }
@@ -1002,6 +1012,7 @@ button {
     left: 0%;
     z-index: 1;
     user-select: none;
+    -webkit-user-select: none;
 }
 
 body.screenshot-mode #menubar,

macrovision.js

@@ -2051,6 +2051,11 @@ function rotate(point, angle) {
 const testCtx = testCanvas.getContext("2d");
 function testClick(event) {
 
+    if (navigator.userAgent.indexOf("Safari") >= 0) {
+        clickDown(event.target.parentElement, event.clientX, event.clientY);
+        return;
+    }
+
     testCtx.save();
 
     const target = event.target;
@@ -2060,10 +2065,11 @@ function testClick(event) {
 
     // Get click coordinates
 
-    let w = target.width;
-    let h = target.height;
-    let ratioW = 1, ratioH = 1;
+    let w = target.clientWidth;
+    let h = target.clientHeight;
 
+    let ratioW = 1, ratioH = 1;
+    /*
     // Limit the size of the canvas so that very large images don't cause problems)
     if (w > 1000) {
         ratioW = w / 1000;
@@ -2075,7 +2081,7 @@ function testClick(event) {
         w /= ratioH;
         h /= ratioH;
     }
-
+*/
     // todo remove some of this unused stuff
 
     const ratio = ratioW * ratioH;
@@ -2106,12 +2112,11 @@ function testClick(event) {
 
     testCtx.resetTransform();
 
-
-
     testCtx.translate(actualW/2, actualH/2);
     testCtx.rotate(angle);
     testCtx.translate(-actualW/2, -actualH/2);
-    testCtx.drawImage(target, (actualW/2 - w/2), (actualH/2 - h/2), w, h);
+    console.log(w, h, actualW, actualH, ratio)
+    testCtx.drawImage(target, 0, 0, 50, 50);
     testCtx.fillStyle = "red";
     testCtx.fillRect(actualW/2,actualH/2,10,10);