Safari: style recalculation issues

[frolvanya]

Did you clear cache before opening an issue?

• I have cleared my cache

Is there an existing issue for this?

• 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:

Screen.Recording.2024-05-20.at.20.11.55.mov

Firefox:

Screen.Recording.2024-05-20.at.20.12.51.mov

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

[Miodec]

Classic safari

[Miodec]

For some reason safari is struggling with some elements. Pages affected are everything except the typing page.

For example, account page: deleting the profile and test activity elements fixes the performance issues.

[Miodec]

About page:

Deleting contributors section fixes lag.... What the fuck is safari doing??????

[frolvanya]

Also, I have the same issue with personal records sections and I don't remember this issue to happen before the heatmap was released. However, graph section (accuracy/wpm ratio) works perfectly

Screen.Recording.2024-05-23.at.06.48.51.mov

[Miodec]

Also, I have the same issue with personal records sections and I don't remember this issue to happen before the heatmap was released. However, graph section (accuracy/wpm ratio) works perfectly

Screen.Recording.2024-05-23.at.06.48.51.mov

I would personally still call this hover behavior "slow-af"

[frolvanya]

I would personally still call this hover behavior "slow-af"

Yeah, personal records are slow-af indeed, but I was saying that graph (sorry, maybe it has a different name) works smoothly

Screen.Recording.2024-05-23.at.07.00.07.mov

[Miodec]

I would personally still call this hover behavior "slow-af"

Yeah, personal records are slow-af indeed, but I was saying that graph (sorry, maybe it has a different name) works smoothly

Screen.Recording.2024-05-23.at.07.00.07.mov

Graph is handled completely differently (by the graphing library) and is being drawn to a canvas, not straight to the dom like the test activity calendar graph.

[Miodec]

After a lot of digging I found that its a Safari issue (big surprise)

Some of the webkit bug reports:
https://bugs.webkit.org/show_bug.cgi?id=232176
https://bugs.webkit.org/show_bug.cgi?id=271083

The PR merging a fix apparently got merged in March: WebKit/WebKit#25982 - Im not sure how long it takes for them to release this.

Some isolated test cases:

https://codepen.io/brendanmckenzie/pen/NWpKWez - resize is slow
https://exponential-layout.glitch.me - this one draws a pretty exponential graph on Safari (how fancy)

Anyway, I could spend most of my days trying to look for band aid fixes and workarounds to reduce the number of nested grids, but in my opinion its a total waste of time, especially since it seems like its a fundamental flaw in the Webkit engine.

Sorry guys.

[Miodec]

That being said, I will at least try for some quick fixes where it doesn't require too many changes.

[Miodec]

Good news: the first random thing i tried completely fixed the issue. I don't even know anymore....

Going live later today.

[frolvanya]

Sorry guys.

I'm just glad to know that small indie company called "Apple" miserably failing at creating good browser engine and it's not some performance issue on your side + this fix probably will be merged soon, so let's just wait

That being said, I will at least try for some quick fixes where it doesn't require too many changes.

Let me know if you won't be able to find a quick fix. Maybe I'll try to fix it, once I'll have some free time

[frolvanya]

Oh, that was quick enough)