Fix caret for real! (#653)

Turns out the root cause was the outline. For some reason, doing "transparent" doesn't work but doing "1px solid transparent" does. Don't know why but I'll take it!

src/element/textWysiwyg.tsx

@@ -39,7 +39,7 @@ export function textWysiwyg({
 
   Object.assign(editable.style, {
     color: strokeColor,
-    position: "absolute",
+    position: "fixed",
     opacity: opacity / 100,
     top: y + "px",
     left: x + "px",
@@ -48,7 +48,9 @@ export function textWysiwyg({
     display: "inline-block",
     font: font,
     padding: "4px",
-    outline: "transparent",
+    // This needs to have "1px solid" otherwise the carret doesn't show up
+    // the first time on Safari and Chrome!
+    outline: "1px solid transparent",
     whiteSpace: "nowrap",
     minHeight: "1em",
   });

src/styles.scss

@@ -3,10 +3,6 @@
 body {
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
-  overflow: hidden;
-  position: fixed;
-  width: 100%;
-  height: 100%;
   color: var(--text-color-primary);
 }