New site doesn't load on Mobile Safari

[jwoertink]

Love the new design 🙌 but I'm having trouble getting it to load on mobile. I'm using iOS 17.4.1 on iPhone 13.

This is after clearing cache, and I've also tried opening up in private browsing.

After a few attempts, I was able to get the logo to load as well, but still nothing else.

[straight-shoota]

That's odd. We had a test with iOS 17.3.1 where everything was fine. 🤔

[jwoertink]

I tried connecting to the safari debugger to see if I could get anymore info, but the network panel looked fine, and there weren't any issues in the console... Though, I'm not sure I trust the debugger since updating my mac 😕 I have issues with it on my own site. I'll see if I can get any other info on this.

[straight-shoota]

I did another test with iPad Pro 12.9", 2nd Generation iPadOS 17.2 (21C62) and everything looks fine there.

[jwoertink]

Yeah, it's still doing it for me. One weird thing I noticed is the site actually loads and I see all of the elements for a split second, then they all go away except for 1 or 2 parts. Then if I try to reload the page, it just never loads. No plugins or extensions, and it happens using Wifi and 5G networks. I can do a screen recording and send it if you want. Not sure if github will let me submit a video in a comment. If you'd like, let me know where I can send a screen recording.

[jwoertink]

Just to make sure it's not just me, it looks like @russ gets the issue too

However, the other people on my team seem to load the site fine. Clearing cache on the entire browser and private browse tab still doesn't fix it.

[russ]

Just to note, the site does load on mobile, but just content above the fold. Scrolling down you see everything just blank after Johannes Müller. iPhone 11, iOS 17.3.1

[straight-shoota]

We received another report here: https://fosstodon.org/@fnordfish@ruby.social/112205967637696757

[fnordfish]

iPhone 11 Pro, iOS 17.4.1

https://ruby.social/@fnordfish/112205967220293581

The most confusing part is, that reload seems to be blocked.

[jwoertink]

reload seems to be blocked.

Ok, so it's not just me... That's made it very difficult to try and debug because when I open the safari dev inspector, then refresh, it never loads 😂

[crysbot]

This issue has been mentioned on Crystal Forum. There might be relevant details there:

https://forum.crystal-lang.org/t/website-relaunch/6719/17

[beta-ziliani]

As a workaround, given that the issue doesn't show up in iOS Simulator, I suggest to detect the user agent and replace the page with a banner stating that it doesn't work on that browser 🤷
Apple, I hate you.

[jwoertink]

If anyone wants to do some live debugging, maybe on a discord video chat or whatever, let me know. I can hit the site while y'all watch the logs or something.

[straight-shoota]

Let's try to figure out the specific cause for this mishap. We can disable parts of the website and see what makes it render correctly.

A binary search through _sass/main.css and js/bundle.js with removing parts of those files could be a good pointer.

@jwoertink If you're willing to help, would you try running the website locally (instructions are in the README) while making some modifications? I could also prepare a couple of preview branches to test, but that's going to slow down iterating.

[jwoertink]

Cloned the site and pulled it up locally on my phone with ngrok. Good news is I'm able to recreate the issue 🎉

Removing this section seems to fix it

crystal-website/_sass/pages/_home.scss

Lines 37 to 53 in e72f1e1

	&::before {
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	opacity: 0.5;
	background-image: url(/assets/home/pattern.svg);
	background-repeat: no-repeat;
	background-size: clamp(30vw, max(80rem, 50vw), 250vw) auto;
	background-position: clamp(-15vw, -40rem + 50vw, 0px) top;
	}

or I guess more accurately, removing these two lines

background-size: clamp(30vw, max(80rem, 50vw), 250vw) auto;
background-position: clamp(-15vw, -40rem + 50vw, 0px) top;