When using SvelteKit with the JavaScript Intl.DateTimeFormat API without specifying a locale, server-side rendering defaults to the server's locale (often en-US) while the browser uses the user's actual locale, causing a brief visual mismatch dubbed 'Flash of Wrong Locale' (FOWL). The fix involves reading the Accept-Language HTTP header in hooks.server.ts, storing the parsed locale in event.locals, forwarding it via a load function, and passing it explicitly to the Intl.DateTimeFormat constructor. Edge cases include privacy browsers that send generic en-US headers and caching layers that must vary on Accept-Language. A Safari/JavaScriptCore quirk also causes inconsistent date formatting even with the same locale.

4m read timeFrom dbushell.com
Post cover image
Table of contents
SvelteKitFixing FOWLOh, Safari

Sort: