:target selector breaks with client-side routing

[qw-in]

What version of Remix are you using?

1.16.1

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

https://codesandbox.io/p/sandbox/interesting-tu-u6gh0r?file=%2Fpackage.json%3A1%2C1

Try the above sandbox (probably best in fullscreen mode) with JS enabled & disabled. Note the difference

---

1. Link to a specific element in a page via its id <Link to="/page#element-id" />
2. Style that element with a target selector #element-id:target { /* my styles */ }
3. Note that during navigation with js disabled the styles are applied as expected
4. Note that with js enabled, the styles flash briefly or are simply not applied

Expected Behavior

I would expect the behaviour to be identical with js enabled & disabled. So, I expect :target styles to be applied

Actual Behavior

:target styles are not always applied

[qw-in]

I'll try to write an integration test this weekend if I get a chance

[brophdawg11]

This is unfortunately correct, and has come up before although I'm having trouble finding an issue in the Remix or React Router repos (it may have just been an internal Discord discussion though). Per the spec pushState does not update the target element so :target styles only apply on full-document requests 😕

[qw-in]

Thanks for the thorough response @brophdawg11, that makes sense. Hopefully the behaviour will change in the future - maybe with the navigation api. I'll have a look if I get a chance.

[brophdawg11]

I hope so too!