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

[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;

[straight-shoota]

Thanks for digging into this, Jeremey! ❤️

This is quite interesting. Maybe Safari has an issue with rendering this big background image with lots of thin lines and transparency... It causes issues as soon as the SVG is loaded.

[beta-ziliani]

#780 still doesn't fix it on iPhone 11 Pro Max with iOS 17.4.1

[jwoertink]

Oh weird... Yeah... assuming that PR was deployed, it seems to still be doing it 🤔 Could it be cache just holding on to the old version?

[straight-shoota]

Hm, I think it's unlikely. But could you try the master branch locally again? If the fix works there, we know we need to look at caches or any other issue related to loading from the internet.

[jwoertink]

Ok, so I pulled down master, booted it locally, threw it up on ngrok, and got the same deal... However, after removing that entire &::before section and a couple of refreshes, I get this

This is what happened last time too though. After I updated the sass, I did have to refresh like 5 times before it worked. I assumed it was cache, but maybe it's actually some race condition with the sass?

Also a side note, but I had to disable livereload. The site wouldn't come up for me at all through ngrok with it enabled. I'm sure that's unrelated, but still wanted to note.

[straight-shoota]

Hm, that's too bad 😢

I guess we'll have to remove the entire pattern background then.
Or figure out how to fix this for real 🤷

I assumed it was cache, but maybe it's actually some race condition with the sass?

If it is a race condition, it must be in Safari.