search

crystal-lang / crystal-website

crystal-lang.org website
61 stars 77 forks source link

Unresponsive and wrong background on macOS Safari #757

Closed etra0 closed 7 months ago

etra0 commented 7 months ago

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.

https://github.com/crystal-lang/crystal-website/assets/19335821/826009ee-63f7-4ebd-8201-f5eb1cf6f8cc

etra0 commented 7 months ago

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

straight-shoota commented 7 months ago

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.

straight-shoota commented 7 months ago

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.

etra0 commented 7 months ago

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

image

beta-ziliani commented 7 months ago

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

ysbaddaden commented 7 months ago

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)

straight-shoota commented 7 months ago

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

straight-shoota commented 7 months ago

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

ysbaddaden commented 7 months ago

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

straight-shoota commented 7 months ago

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.

straight-shoota commented 7 months ago

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.

etra0 commented 7 months ago

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

ysbaddaden commented 7 months ago

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