𝗖𝗵𝗿𝗼𝗺𝗲 𝗪𝗼𝗿𝗸𝗲𝗱. 𝗙𝗶𝗿𝗲𝗳𝗼𝘅 𝗙𝗮𝗶𝗹𝗲𝗱.
I saw the same page in two browsers side by side.
In Chrome: The page worked perfectly. It had images, buttons, and a full list of results.
In Firefox: The page was empty. It showed placeholder cards with no images and a message saying 0 results found.
The code was the same. The URL was the same. The server was fine.
The problem was the browser.
Firefox uses Enhanced Tracking Protection. Many users also use tools like uBlock Origin. These tools block requests to domains they think are trackers.
My app fetched data from a Supabase domain. To Firefox, that domain looked like a third-party tracker. The browser blocked the request before it even left the machine.
Because the fetch failed, my code showed the fallback state. It did not crash. It did not show an error in the console. It just showed an empty page.
This created a double blind spot:
- My development browser (Chrome) worked perfectly. I never saw the bug.
- My analytics used the same domain. The users who could not see the content also could not be tracked. They were invisible.
I fixed this by moving from a third-party request to a first-party request.
Instead of calling the vendor domain directly, I used a reverse proxy. I routed the API through my own domain.
Before: mysite.com calls xxxx.supabase.co (Blocked) After: mysite.com calls mysite.com/sb-api (Trusted)
Now, the browser sees a same-origin request. It treats the data call like part of the site itself.
If you face similar issues, remember these three things:
• Watch your websockets. Simple path rewrites might break realtime connections. • Pin your auth storage keys. Changing the URL can change how the browser stores login sessions. • Prerender your content. Do not let your page depend entirely on JavaScript. If a browser blocks your script, the user should still see the core content in the HTML.
Stop assuming if it works in Chrome, it works for everyone. Test with privacy extensions turned on.