Live counters bug on Safari

[au2001]

Description of the bug

The live counters (wpm and accuracy) behave very strangely in several ways when using Safari 14 on macOS.
First of all, this only happens if one or both of these counters are enabled and "timer/progress style" is set to "bar" or "text" (anything but "mini", the default).

Then, there are two cases I have found out about which seem related:

1. When "quick tab mode" is on, the counters refresh with unpredictable timing and very slowly (sometimes they don't for 10-20 seconds).
2. When "quick tab mode" is off, the counters appear "split" in half horizontally. The top part (behind the restart arrow button) is live, but the bottom part behaves the same as described above.

In both cases, when both live counters are enabled, they are also sticked together without a space between them, like they are on other browsers.

Incognito mode/clearing cache

It is consistently reproducible in a private window, after clearing the caches, and/or turning my computer off and back on again.
It is also consistently reproducible on Monkey Dev.

Steps to reproduce

1. Go to Monkeytype.
2. In the settings, scroll to "hide elements" and click "show" next to "live wpm" and/or "live accuracy".
3. Scroll to "appearance" and click either "text" or "bar" next to "timer/progress style".
4. Return to the home page and start a test.
5. When typing, the live wpm and live accuracy work well for the first 1-2 seconds and then the bug appears.
6. You can also turn on or off "quick tab mode" to compare both behaviours.

Screenshots

Quick tab off:

Quick tab on: Video (MP4, 800 KB)

Specs

Desktop:

• OS: macOS Big Sur
• Browser: Safari
• Version: 14.0.3

[Miodec]

Its been like that for a while now. It only happens in Safari and I've got no idea what causes it.

[Miodec]

Could be actually related to the fact that these elements have a height of 0px to avoid the text jumping up and down when they are enabled.

[au2001]

I'm not sure this is because of their height being set to 0 px.

But I found out that when opening the Dev Tools under the Elements tab and expanding the #largeLiveWpmAndAcc element which reveals the two counters, the bug completely disappears. If the live counter elements aren't visible in the Dev Tools, then the bug still happens.

So this is certainly a Safari bug. But there might be a workaround that could be implemented?

[kiriDevs]

It also seems to happen on Safari on iPadOS and the live WPM display.

[Miodec]

I think i fixed it by accident. Please check @kiriDevs @au2001. The fix should be live now, and the counters should be properly spaced out. If they are not, that means you've got old code cached. This fix worked for me so far on a MacBook Air

[au2001]

I can confirm this is fixed on the live version, at least when using desktop Safari v14.1.1 on macOS Big Sur.