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

[martinleopold]

Hi again,

I have with a new class this week and unfortunately the issue still persists. I've had 23 students, most of them on iMacs or Macbooks running Safari. Using a sketch with an image, we've run into the issue I'd say at least 15 to 20 times. Only one 'Bad Gateway' occurrence though. Our solution at the moment is clearing the cache, which works.

What's the best way we can help in tracking down the problem? Any debug info we can provide?

[raclim]

Hi @martinleopold thank you for sharing this! A few others have also recently reported this issue (#3232, #3069, #3062), and we were able to conclude that it's most likely due to aggressive caching by the browsers. In this case, it seems like the browser is caching the image requests in a way where certain header information isn't being saved, resulting in this CORS error.

I think a few temporary solutions could be to try to use the browser with the "Disable Cache" button in the Developer Tools checked (shown in one of the linked issues), or potentially using Firefox, which seems handle caching differently than Safari and Chrome. We're still trying to work on finding a longterm solution for this, such as adjusting the CORS policy, but haven't been able to come towards one yet. I'm sorry again that this has been happening—if you have any suggestions on ideas for resolving this, please let us know!

[martinleopold]

Hi @raclim, thanks for getting back to me! I agree that this is most likely a browser problem. I've been looking into it again but it's especially hard to debug since browsers don't show the CORS preflight requests in the developer tools. At least Safari doesn't and I can only somewhat reproduce the problem in Safari.

Clearing cache or disabling it as you suggested does work as a temporary solution, but it has been months now... Therefore I suggest to implement the cache circumvention on the p5 editor side. This could be preceded by a browser detection, so it only kicks in on affected browsers.

The conventional cache busting technique is to add "?" plus a timestamp to the URL. There is also the cache option that can be specified with fetch() – I assume asset loading is implemented using fetch.

I've tried some of the cache options as well as cache-busting using the URL here in this sketch and they seem to work, even when the default fetch fails.

[raclim]

@martinleopold Thank you so much for looking into this, your sketch was extremely helpful!!! I tried implementing the suggested technique you suggested to add a timestamp to the asset URLs in the PR above. I tested it out on a few sketches where this error was occurring, and it seemed to work for me! I think I was too absorbed with trying to find a solution through the CDN and other platforms (which might've been a bit costly) and didn't realize the solution could be this simple! 😅 Please let me know if this has been resolved for you as well and I can update other similar issues!

[martinleopold]

@raclim Thanks for implementing this so quickly! I see it working for images for me now, haven't tested other assest like fonts yet.

I'd still consider this a 'temporary' fix, since it effectively circumvents caching. So it makes asset loading slower – still much better than getting errors of course! Hope those browsers get fixed sometime, it's still an issue in the recently released Safari 18.

Maybe we should try creating a minimal, reproducible test case (without libraries like p5 and the editor) so we can properly report it to the affected browser vendors?

[raclim]

@martinleopold That makes sense to me, I'll look into creating a test case and will report it once its done! Thank you so much again for your insight on this!

[martinleopold]

@raclim Good to hear! I'm happy to help with the test case, just let me know.