Update: I went back to my project to get more details from it but when I ran it again with npm run dev the website went back to normal! I didn’t make any changes to it since posting the question, things returned to normal on their own. Maybe it was a strange caching issue? Or something with VSCodium? Has anyone experienced something similar?

Original Question

I need some serious help. I’ve been working on my very first real-world Svelte 5 project, which is a website for a roofing contractor.

Everything was going very well, until yesterday when I updated my Mac to macOS 15.2. Prior to that I was on 14.4 (I don’t know if this change is related but it was the only major change I made to my computer before I noticed this issue).

So now my website looks like this:

website with completely broken CSS

As you can see there are a lot of wrong things going on, and if you scroll down to the bottom more you will see even more issues. The CSS is completely messed up, containers are not aligned correctly, components are overlapping, and more. I have tried to play around with the code to fix the problems but nothing works as it should.

I’ve tested the issue on multiple browsers and its the same across all of them: firefox, chrome, safari. I have not had a chance to test it on a windows or linux machine yet.

I’ve tried to google the issue but have not found any one with the same issue.

I created a public repository with all of my code here: my storyboard app code repo

Here are my dev dependencies from package.json. As you can see, I’m using Svelte 5 and SvelteKit 2.9:

"devDependencies": {
        "@iconify-json/material-symbols": "^1.2.10",
        "@iconify-json/mdi": "^1.2.1",
        "@sveltejs/adapter-auto": "^3.0.0",
        "@sveltejs/kit": "^2.9.0",
        "@sveltejs/vite-plugin-svelte": "^5.0.0",
        "svelte": "^5.0.0",
        "unplugin-icons": "^0.21.0",
        "vite": "^6.0.0"
    }

Would really appreciate your help on this!