Unresponsive and wrong background on macOS Safari about crystal-website HOT 13 CLOSED

@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.

from crystal-website.

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.

from crystal-website.

I can confirm that both the dark theme and the responsive-ness was fixed! it looks smooth as sail now, thanks!

from crystal-website.

Have to add, the same site on Chrome works and looks ok.

from crystal-website.

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.

from crystal-website.

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.

from crystal-website.

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.

Yes, it seems to be mixing dark mode with light mode somehow. In the lower part the colors are off, and in the blogposts as well

from crystal-website.

macOS 13.6.6 on Intel, Safari 17.4.1, works fine in either mode. A bit sluggish, but works.

from crystal-website.

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)

from crystal-website.

The logo animation is the same as before. If that's the cause it would've been so in the old website as well.

from crystal-website.

@ysbaddaden Could you verify if you see the same behaviour in https://web.archive.org/web/20240326013420/https://crystal-lang.org/ ?

from crystal-website.

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.

from crystal-website.

Same here. I can't reproduce anymore on Epiphany.

from crystal-website.