Container query not working after a react-route navigation.

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.

[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!

[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.