Make Firefox dash render hack stronger

Make dashed circle outlines even more elliptical on Firefox to see if
this fully works around #35.

Also adjusted the hack to only apply on Firefox (and derivatives) by
checking for "Gecko" in the user agent.

Author: joelspadin

src/prefabs/Markers.tsx

@@ -1,6 +1,7 @@
 import { ShapeConfig } from 'konva/lib/Shape';
 import { EllipseConfig } from 'konva/lib/shapes/Ellipse';
 import * as React from 'react';
+import { useMemo } from 'react';
 import { Ellipse, Group, Image, Rect } from 'react-konva';
 import { getDragOffset, registerDropHandler } from '../DropHandler';
 import { ALIGN_TO_PIXEL } from '../coord';
@@ -109,13 +110,17 @@ const EllipseOutline: React.FC<OutlineProps> = ({
     // Making the object always slightly elliptical works around a bug on
     // Firefox where it draws a very thick arc instead of dashes.
     // https://github.com/konvajs/konva/issues/1864
-    const firefoxHack = 1.0000001;
+    const isGecko = useMemo(() => navigator.userAgent.includes('Gecko'), []);
 
-    if (width === height) {
-        width *= firefoxHack;
-    }
-    if (highlightWidth === highlightHeight) {
-        highlightWidth *= firefoxHack;
+    if (isGecko) {
+        const geckoHack = 1.001;
+
+        if (width === height) {
+            width *= geckoHack;
+        }
+        if (highlightWidth === highlightHeight) {
+            highlightWidth *= geckoHack;
+        }
     }
 
     return (