An unexpected error caused by a CSS class

Describe the bug

Good morning, I am getting very rare error with one-block css.

It turns out that when I go to my “projects” web section, it slows down and takes a long time to load the page. Once loaded the project cards also take time to show the animations when making a hover.

The console does not throw errors but I identified what it is. It’s because of using a display: grid in my css classes.

Why could this be happening?

Reproduction

https://user-images.githubusercontent.com/3437192/142632666-985bddc3-aab4-4094-a8d6-b6ba393e6f51.mp4

Logs

The editor and browser console does not throw me an error

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
    Memory: 8.81 GB / 15.94 GB
  Binaries:
    Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 96.0.4664.45
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.53)
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.184
    svelte: ^3.44.2 => 3.44.2

Severity

annoyance

Additional Information

No response

[JappIC]

I also tried vanilla css in case the problem came from postcss but the error keeps reproducing

[JappIC]

The fact that a CSS change makes the bug go away means that this is almost certainly not a Svelte-Kit bug. Svelte (and Svelte-Kit) do not have anything to do with the browser’s rendering of CSS. Svelte compiles your components to Javascript, and Svelte-Kit helps serve your pages and endpoint routes, but neither one does anything with your CSS besides add a unique svelte-123456 class to your elements.

Which means that this issue tracker is not the right place for this. The Svelte community at https://svelte.dev/chat is very friendly and you’ll find people willing to help you there. (Though this weekend a lot of people will be busy preparing for Svelte Summit, so you might not get help until Monday). And if it turns out that this really is a Svelte-Kit bug after all, please feel free to open a new issue — but this time, please follow the instructions on the new issue page:

A link to a repository that reproduces the issue. Explaining how to reproduce is generally not enough. It pushes the burden of creating a reproduction project onto a small set of volunteer maintainers and isn’t scalable. If no reproduction is provided within a reasonable time-frame, the issue will be closed.

A video showing the issue happening is fine, but that’s not something that others can clone, reproduce, and watch the bug happening on their own machines. We need an actual Git repository link. If your repository is private, you can create a small repo that reproduces the bug. But either way, if you do end up proving that this is a Svelte-Kit bug after all and open a new issue, please make sure to include a link to a reproduction repo so that others can clone it and watch the bug happen. Otherwise, there’s almost no chance anyone will be able to figure out what’s causing it and fix the issue.

Ok I understand, thank you very much for the clarification