From 4ff88ae03dfa6029a63f00664cbeffbc7a0c00dc Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeuxx@gmail.com>
Date: Sat, 1 Feb 2020 06:07:08 +0000
Subject: [PATCH] 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 | 6 ++++--
 src/styles.scss             | 4 ----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx
index bbe405c4..cdeeac21 100644
--- a/src/element/textWysiwyg.tsx
+++ b/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",
   });
diff --git a/src/styles.scss b/src/styles.scss
index 6c097435..c7f57ecc 100644
--- a/src/styles.scss
+++ b/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);
 }