Intermittent asset loading errors in Safari

[martinleopold]

p5.js version

1.9.4

What is your operating system?

macOS 14.5

Web browser and version

Safari 17.5

Actual Behavior

We've been experiencing severe problems using the web editor in class, specifically when loading images and fonts. In a group of 20 students, there's never been a single session without those issues. Most of them are using Macbooks or iMacs.

The issue seems hard to reproduce, because a single sketch sometimes works, and sometimes doesn't. We've been calling it "p5.js server issues", maybe it's a regional thing as well – we're based in Austria/Europe.

This sketch fails for me right now in Safari 17.5: https://editor.p5js.org/groedl/sketches/OGg6QwaFu

The console reveals a CORS issue:

Some additional observations:

• The sketch works just fine in Chrome 126.
• The sketch works in Safari when using Private Mode.

The image seems to be loaded using fetch(), so I've tried to do that "manually" here: https://editor.p5js.org/groedl/sketches/86WqYZ9IR

This fails as well, but there are two cases which make the fetch() work:

1. Adding a trailing slash to the URL – found here: https://stackoverflow.com/a/39875236
2. Using mode: no-cors. Image Link

EDIT: These don't actually fix the issue. Case 1 works with fetch() but results in a 404. no-cors suceeds but returns no data (which is intended with no-cors).

Possibly related issues: #3062, #3089

Expected Behavior

Images should load without issues.

Steps to reproduce

Steps:

1. Run this sketch in Safari 17.5: https://editor.p5js.org/groedl/sketches/OGg6QwaFu

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[raclim]

Thank you for reporting this! I'm really sorry to hear that you've been experiencing this issue so frequently, that must be really frustrating for you and your students. We'll take a look at this and will try to have a resolution by sometime next week, and will keep this issue posted if anything changes.

[martinleopold]

Thanks for getting back so quickly! Let me know if I can help with anything from my end.

[Ramannandiwal]

hi @martinleopold actually the issue is not observed in my laptop i am using chrome and kali linux as operating system

[martinleopold]

i am using chrome and kali linux as operating system

Yes, this only applies to Safari.

[PiyushChandra17]

I think i need to update my safari version in order to resolve this issue, currently not reproducible on my machine

[raclim]

I also initially had some issues reproducing this issue in Safari using the first sketch you linked, but was able to see it after opening your second one. I think this might be related to how Safari is caching these resources (especially since this seems to work in Private Mode), which I think is similar to the issue this person faced in this article.

After reading this, I think another temporary workaround could be clearing the browser cache for the p5.js site. However, we're still trying to figure out how to adjust our CORS configuration to fix this issue!

[martinleopold]

After clearing the cache (or reloading with disabled cache in dev tools) the first sketch seems to work for me pretty consistently.

I guess the second sketch somehow breaks Safari's cache – but it seems to create the exact conditions that happened to me and my students.

I've run a lot of different student sketches yesterday, around 20, and had no loading issues at all. But: I got two 'Bad Gateway (502)' errors. Now I remember we did get these in class as well – they might be related to the loading issue – maybe these are what breaks the cache when such a server issue happens during an asset fetch? Just speculating though...