Shaky caret on Firefox

[stefnotch]

Description

On Firefox, the expression shakes a little bit when moving the caret around.

For what it's worth, one fix is injecting the following styles into mathlive

math-field:hover,
  math-field:focus,
  math-field:focus-within {
    outline: var(--border-color-secondary) auto 1px;
  }
  math-field {
    transition: outline 0.2s ease-in-out;
  }

Steps to Reproduce

1. Be on Firefox with Windows 10
2. Go to https://cortexjs.io/mathlive/
3. Paste in \begin{equation*} \frac{3}{3+5} \end{equation*}
4. Put the caret at the end of the mathfield
5. Hit the left arrow key

Actual Behavior

Expected Behavior

No shaking

Environment

MathLive version v0.69.4

Operating System Windows 10

Browser Firefox

[stefnotch]

A fix for the caret is to use box-shadows

.ML__caret:after {
          border-right-width: 0px !important;
          margin-right: 0px !important;
          width: 0px !important;
          box-shadow: 0px 0px 0px 1px var(--caret,hsl(var(--hue,212),40%,49%));
         }

[manstie]

I do not get this issue with MathLive 0.82 / Windows 10 / Firefox 105.0.1

[stefnotch]

True, the issue seems to be mostly gone now. The only thing I could observe was the letters ever so slightly changing their position depending on where the caret is.

(Tested with mathlive on the website)

firefox_2022-10-02-0263.webm

[arnog]

I think it's fixed now, unless using extremely high zooming level.