Use a background instead of a :before element for highlighted spaces

FIX: Improve performance of documents displaying lots of highlighted spaces by using a CSS background instead of pseudo-element. Issue codemirror/dev#1445
codemirror · Sep 25, 2024 · 605fd72 · 605fd72
1 parent aea2395
commit 605fd72
Showing 1 changed file with 3 additions and 5 deletions.
diff --git a/src/theme.ts b/src/theme.ts
@@ -248,11 +248,9 @@ export const baseTheme = buildTheme("." + baseThemeID, {
     verticalAlign: "top",
   },
 
-  ".cm-highlightSpace:before": {
-    content: '"·"',
-    position: "absolute",
-    pointerEvents: "none",
-    color: "#888"
+  ".cm-highlightSpace": {
+    backgroundImage: "radial-gradient(circle at 50% 55%, #aaa 20%, transparent 5%)",
+    backgroundPosition: "center",
   },
 
   ".cm-highlightTab": {