Unresponsive and wrong background on macOS Safari
etra0 opened this issue · comments
I tried my best to record the unresponsive-ness. Consider every time the mouse was over a button I was clicking but several times it didn't respond or simply get stuck (as you can see the logo stops spinning).
(The constant scrolling was me because I also noticed when it freezes scrolling also doesn't work)
I'm on a Macbook M2 Pro with macOS 13.6 on Safari Version 16.6 (18615.3.12.11.2)
Tried with incognito, deleted website data and with cache disabled from the dev. console.
recording.mp4
Have to add, the same site on Chrome works and looks ok.
Thanks for the report. I have no idea what might be causing this.
Do you only notice this unrepsonsiveness when interacting with the the code examples tabs or elsewhere on the page as well? This component uses some custom JavaScript to implement the UI actions. That would be the only place where we could try to improve something.
I also notice in the video that the text colors appear to be completely off in the lower part of the page. In the header they're okay.
I don't have access to a Mac to investigate this issue. Testing with Safari 16.5 on browserstack.com I could not even reproduce it. Everything seems to be working fine there.
macOS 13.6.6 on Intel, Safari 17.4.1, works fine in either mode. A bit sluggish, but works.
I tried Epiphany (GNOME Browser) on Linux, and WebKit uses 100% of a CPU core, spending all its time in painting. Trying to scroll the page can take over a second to start responding, stuck crystal logo, etc. On other pages, WebKit only takes 50-75% of the CPU core, and scroll isn't as affected as the home page, but still kinda sluggish.
Firefox only uses 20% on the home page, and when I scroll down it eventually uses nothing (I guess the logo is no longer animated). Epiphany continues to take 100%.
Epiphany 3.36.4 /WebKitGTK 2.38.6
Firefox 124
CPU i7 4712HQ (old)
The logo animation is the same as before. If that's the cause it would've been so in the old website as well.
@ysbaddaden Could you verify if you see the same behaviour in https://web.archive.org/web/20240326013420/https://crystal-lang.org/ ?
@straight-shoota I don't reproduce using the web archive link. The animation uses 30% CPU, and it goes up over 60% while I scroll the page, yet the scroll is still reactive.
On https://crystal-lang.org, if I delete the <canvas>
from the HTML, then the animation doesn't use any CPU anymore, but trying to scroll still stutters with the CPU going over 100%.
I think the animation ain't the issue. It's likely some CSS features not working correctly together.
I can reproduce the lagging response when clicking a tab icon on an iPad Pro 12.9", 2nd Generation iPadOS 17.2 (21C62)
Same in Epiphany.
I'm running Epiphany on WSL2 and the overal user experience is far from fast responsive. It takes a lot of CPU (> 400%, just sitting around). But that does not seem to be special for the Crystal website, I tried others (including the old website) with similar results. So my experience points towards just a super slow technology (probably from running in WSL2?).
UPDATE: Actually, it seems flatpak might be at fault perhaps? I tried Epiphany installed directly from the Ubuntu packages and performance is a different story. The website feels pretty slick and occupies 40% CPU. I still notice a short delay on the example tabs, but not as much as in Safari.
With the most recent version of the website (which has a couple of workarounds for WebKit issues published) I don't notice a significant lag anymore in Epiphany. Not sure if that's just a coincidence, but it's possible that some of the bugs we have recently fixed were affecting layout engine performance.
I can confirm that both the dark theme and the responsive-ness was fixed! it looks smooth as sail now, thanks!
Same here. I can't reproduce anymore on Epiphany.