Horrible Safari Issue

Somebody will probably tell me that I am doing something wrong, and that Safari is behaving correctly, but, uh… since all other browsers work fine, and it ONLY happens in Safari, I will call it a horrible Safari issue. Now that disclaimers are aside…

I looked ALL over the Internet to find a reference to this issue, I searched for days and days, I eventually abandoned all hope and started talking to my volleyball when suddenly I ran into this:

I was startled, confused, there was a sign that said, “The End.” And as I was looking around there was Vincent D’Onofrio beside me with a wine glass and a rifle and I could not tell which character he was in at that moment.

Ok, ok, I am not going to explain that — some 1999 humor there for you if you got it.

Anyway… Safari…

I like (love ES6 classes), I build my own render function for my own elements and before you tell me to use a framework, I prefer vanilla and myself than to depend on others code, their bugs and their CDN nightmares or whims. Anyway, in my components they have event handlers that call back into a main function to make fetch() calls, sometimes I make those calls inside the component if they are specialized. It might look like this:

	window.setTimeout(async() => {
	const o = new thing();
	await o.render();
	}, 1);
	class thing {
	render = async () => {
	const html = /*html*/`<button id="btn1">Test</button>`;
	document.body.innerHTML = html;
	const msg = "something here";
	document.getElementById("btn1").addEventListener("click", async () => {
	await this.#getData(msg);
	});
	}
	#getData = async (msg) => {
	const result = await fetch('https://jsonplaceholder.typicode.com/posts/1&#39;);
	console.log(msg);
	const data = await result.json();
	console.log(data);
	}
	}

view raw safari_issue.js hosted with ❤ by GitHub

Now, this code works in Windows and in every browser, and on Mac in every browser and oddly enough, the above simplified code actually works great in Safari, but embedded a few layers deep in event handlers of other components with async because other fetch calls collected data, etc., etc.… It FAILS every time in Safari and only Safari.

What happens is that “msg” variable that I pass into my fetching function (this.#getData) is always UNDEFINED. And I have tried passing just a raw string “this is a string” and it fails. Maybe it is stack depth and a combination of async and even handler callbacks, or something funky with binding of this when you get into things a few layers. But the bottom line is that it ONLY happens in Safari and the ONLY way I have found to work around this is to remove all the async functions and await calls and put the fetch in a window.setTimeout(), like this:

	class thing {
	render = () => {
	const html = /*html*/`<button id="btn1">Test</button>`;
	document.body.innerHTML = html;
	const msg = "something here";
	document.getElementById("btn1").addEventListener("click", () => {
	this.#getData(msg);
	});
	}
	#getData = (msg) => {
	window.setTimeout(async () => {
	const result = await fetch('https://jsonplaceholder.typicode.com/posts/1&#39;);
	console.log(msg);
	const data = await result.json();
	console.log(data);
	}, 1);
	}
	}
	// instantiate
	const o = new thing();
	o.render();

view raw safari_issue_fix.js hosted with ❤ by GitHub

And I did try an old school Promise here where the window.setTimeout and the async on the Promise did the same thing with the “msg” parameter – undefined.

Anyway, I hope this helps someone else experiencing the same issue. And if you have had this issue before and fixed it in another way, please let me know. If you are aware of this issue and it is documented somewhere that I will not encounter an angry D’Onofrio bartender/lab sidekick, please let me know.