"auto" value does not work with react-router (or any other context-based APIs) about react-spring HOT 11 CLOSED

@taylorlapeyre could you try with @4.2.1-beta.0 ? It should be fixed now. It attempts to render out the middlewares result instead of relying on a promise, thereby the fragment ends up in the same render-tree, which hopefully doesn't break context.

from react-spring.

@drcmda Yes, I'll give it a shot!

from react-spring.

@drcmda it's working beautifully now!

from react-spring.

@drcmda Will test with router and styled-components w/ ThemeProvider, will update

from react-spring.

Totally works now!

from react-spring.

Update: tried this a little more and it seems that when the portal is created, the style of the page is (very briefly) removed. When you have custom fonts you can observe fonts changing back to serif font.

EDIT: only happens on first invocation (video, happens at the 3 second mark in Chrome)

from react-spring.

Probably due to css inheritance. The dom node that the fragment is projected into is at the root.

from react-spring.

font-family is set on :root. Also, the Spring and animated.div should not (?) affect the rest of the page, right? There's 2 frames in that video where the whole page's font-family resets for some reason.

from react-spring.

Spring and animated.div are just regular components, must be something else. The portal renders off-screen in a div set to position:static;visibility:hidden;, but it isn't shown, we pick bounds and then the element renders like always, with auto being overwritten by the new bounds. I couldn't imagine any of it would have an impact on the font-family. Here's some info on how fout can come about: https://www.paulirish.com/2009/fighting-the-font-face-fout/

from react-spring.

closing this for now, should something else come up i can reopen

from react-spring.

@drcmda yep, issue was unrelated after all, spring works great now after ditching styled-components' injectGlobal for font injection

from react-spring.