Heatmap Calendar Performance Issue

[frolvanya]

Did you clear cache before opening an issue?

• [X] I have cleared my cache

Is there an existing issue for this?

• [X] I have searched the existing issues

Does the issue happen when logged in?

Yes

Does the issue happen when logged out?

No

Does the issue happen in incognito mode when logged in?

Yes

Does the issue happen in incognito mode when logged out?

No

Account name

frolik

Account config

{"theme":"nord","themeLight":"serika","themeDark":"serika_dark","autoSwitchTheme":false,"customTheme":false,"customThemeColors":["#323437","#e2b714","#e2b714","#646669","#2c2e31","#d1d0c5","#ca4754","#7e2a33","#ca4754","#7e2a33"],"favThemes":["nord"],"showKeyTips":true,"smoothCaret":"medium","quickRestart":"tab","punctuation":false,"numbers":false,"words":10,"time":15,"mode":"time","quoteLength":[0],"language":"english","fontSize":1.5,"freedomMode":false,"difficulty":"normal","blindMode":false,"quickEnd":false,"caretStyle":"default","paceCaretStyle":"default","flipTestColors":false,"layout":"default","funbox":"none","confidenceMode":"off","indicateTypos":"off","timerStyle":"mini","liveSpeedStyle":"off","liveAccStyle":"off","liveBurstStyle":"off","colorfulMode":false,"randomTheme":"off","timerColor":"main","timerOpacity":"1","stopOnError":"off","showAllLines":false,"keymapMode":"off","keymapStyle":"staggered","keymapLegendStyle":"lowercase","keymapLayout":"overrideSync","keymapShowTopRow":"layout","fontFamily":"Roboto_Mono","smoothLineScroll":false,"alwaysShowDecimalPlaces":false,"alwaysShowWordsHistory":false,"singleListCommandLine":"manual","capsLockWarning":true,"playSoundOnError":"off","playSoundOnClick":"off","soundVolume":"0.5","startGraphsAtZero":true,"showOutOfFocusWarning":true,"paceCaret":"off","paceCaretCustomSpeed":100,"repeatedPace":true,"accountChart":["on","on","on","on"],"minWpm":"off","minWpmCustomSpeed":100,"highlightMode":"letter","typingSpeedUnit":"wpm","ads":"result","hideExtraLetters":false,"strictSpace":false,"minAcc":"off","minAccCustom":90,"monkey":false,"repeatQuotes":"off","oppositeShiftMode":"off","customBackground":"","customBackgroundSize":"cover","customBackgroundFilter":[0,1,1,1,1],"customLayoutfluid":"qwerty#dvorak#colemak","monkeyPowerLevel":"off","minBurst":"off","minBurstCustomSpeed":100,"burstHeatmap":false,"britishEnglish":false,"lazyMode":false,"showAverage":"off","tapeMode":"off","maxLineWidth":0}

Current Behavior

In Safari heatmap calendar is too laggy when selecting a specific day, while everything works perfect in Firefox

Safari:

https://github.com/monkeytypegame/monkeytype/assets/59515280/ffab22a9-98fb-46f5-ba8d-e69a9519a212

Firefox:

https://github.com/monkeytypegame/monkeytype/assets/59515280/51d4b9e9-3f43-4544-947c-bd380890cd0a

System: macOS Sonoma 14.4.1

Expected Behavior

It should behave the same in different browsers without any visual delays

Steps To Reproduce

1. Open Safari
2. Open monkeytype.com
3. Login
4. Click a profile icon to view heatmap

Environment

• OS: macOS 14.4.1
• Browser: Safari
• Browser Version: 17.4.1 (19618.1.15.11.14)

Anything else?

I don't have any issues with GitHub's and Leetcode's heatmap, so it's not an bug in Safari