Container query not working after a react-route navigation.

[Enebz]

I have a little demo here: https://github.com/Enebz/container-query-demo

Here, I noticed that the container queries doesn't work after navigating to a new page (using react-router v6)

When you are located in / and click the button that forwards you to /demo The grid of items appears with a column width of 3, which is the default style (mobile first) and not the correct container query style even if you are on a wide screen.

The container queries are located at: https://github.com/Enebz/container-query-demo/blob/master/src/index.css#L142

If you open devtools and resize the width of the container, the container queries work and the grid goes to the correct grid column size.

NOTE You probably noticed that the container I am assigning container-type: size; to is of width: 100% and the same width as the screen, so why not just use @media? Well, this is only a demo and in my real project I have a sidebar which "pushes" the main content, such that I need a container query to correctly set the grid-column size.

[martinszeltins]

I'm having a similar issue with Vue and Vite. After every HMR update the layout resets without the polyfill. Then I have to refresh the page for the polyfill to kick in.

[kafkas]

Same issue with Next.js router

[martinszeltins]

Same issue with Next.js router

You could try to hook into the router's navigation and re-initialize the polyfill on each navigation.

[yuuk]

Seems like there's no exported function to re-initialize

[martinszeltins]

Seems like there's no exported function to re-initialize

You can fork the lib and add a re-initialize function. That's what I did.

[Enebz]

Seems like there's no exported function to re-initialize

You can fork the lib and add a re-initialize function. That's what I did.

I'm not really sure how to go on about that.. I'm still a fresh developer with not so much experience. Could you maybe show me how you did it?

[devknoll]

This should be addressed by the latest version of the polyfill (currently in alpha). Please give it a try. I'm going to close this issue for now, but I would be happy to reopen it if you're still running into problems.

Thank you!

[Enebz]

I am not able to make this work, I am trying to find the re initialization function, but I have no idea where to start.

[martinszeltins]

I am not able to make this work, I am trying to find the re initialization function, but I have no idea where to start.

@Enebz there is no re-initialization function, you have to create it yourself.

[Enebz]

I realized that, but as devknoll said, it was "addressed" in the alpha version.. I thought addressed meant "explained how to do", but it meant that it is now a feature. So I made it work.