Crash on reloading a page with slide anchor

[BenjaminSYD]

Description

When using data-anchor with slides, if I reload a page with a slide anchor in the url the app crashes with error message "can't access property "item", r.activeSlide is null".

Link to isolated reproduction with no external CSS / JS

codesandbox link

Steps to reproduce it

1. Open codesandbox link.
2. Go to "Slide2" using right arrow button.
3. Notice that "#section1/Slide2" is added to the url.
4. Reload the page inside codesandbox (not codesandbox itself).
5. Observe the application crash.

Versions

Versions can be found within the Codesandbox link provided.

[alvarotrigo]

I'm not able to reproduce this issue outside codesandbox.
Have you tried it outside?

[BenjaminSYD]

I can reproduce it in a larger-scale project (I can't share it), but not in a minimalist one.

My assumption is that it could be a concurrency issue occurring in slower environments (heavy app or codesandbox). I will try to reproduce it again another time.

[alvarotrigo]

Probably using css3:false or scrollBar: true will help to avoid this issue.
It looks like an issue with some browsers when dealing with large layouts using transformations.

See this topic:
https://stackoverflow.com/q/76127296

[manxmadness]

Confirming I am also seeing this. My layouts are pretty minimalist. css3: false fixes the issue if I refresh on that route (i.e. /#section/slide1) but if I press the browser's back button (from a different route) it crashes again.

[alvarotrigo]

Try to follow the recommendation on the StackOverflow post for React:

If you're using React, ensure that modals, toasts, etc. utilise a React Portal - this will put all elements in a single container, reducing implicit composition.

And the others too if possible.

On top of those, I would add:

• Use fullPage.js lazy loading for media elements and iframes
• Reduce dimensions of images / videos if they are quite big
• Try avoiding gradients, shadows or any CSS that can cause performance issues

[alvarotrigo]

@manxmadness can you specify what browser are you using? And what device?
Just in case there's anything else we can do about it.

[manxmadness]

Appreciate your quick response. I can reproduce in Safari, Chrome, and Firefox.

[alvarotrigo]

On what device?
Mobile I guess? Model? Android or iPhone?

Could you share your URL or a reproduction of the issue somewhere?