CODEWITHSUNDEEP
javascriptnode.jsreactjs
MortenTZ
MortenTZ

Reputation: 286

React.js mobile site freezes in Chrome on Android

We have a problem with a React.js site acting up, specifically on Chrome/Android. Haven't been able to replicate it in other browsers or platforms (desktop is always smooth).

It is seemingly related to the front page, most likely the amount of images being loaded. For some reason, other browsers (even Chrome on iOS) do not seem to struggle with it.

I have not been able to recreate it with a simple example, but a working, live example can be found at our dev site https://beta.fotmob.com, where you can see that it freezes after a couple of random clicks (using Chrome on Android). The site is server rendered, and all components are React components except a Facebook ad at the top (React component with dangerouslySetInnerHTML for the FB ad code).

There's also another, strange issue regarding any kind of overlay (search button at the bottom or calendar at the top, specifically): Closing the search or selecting a date is a touchend event, which seems to "stick", and will then trigger the hyperlink beneath (match or league), despite the meta tag: meta name="viewport" content="initial-scale=1, width=device-width"

The clicks aren't going "through"; they are definitely appearing after the overlay has been removed, but the 300ms delay shouldn't be present anymore. At any rate, I do not believe this to be the cause of the freezes, but I figured it might be worth mentioning.

Any thoughts or ideas as to what may be causing the problems, or why it's browser specific?

Edit: Just adding the solution here, for people who don't want to keep reading.

Freeze issue: Caused by a number of setTimeout calls that modified the state after the page was loaded. Why it would cause issues specifically in Chrome on Android is still a mystery, however. Perhaps Chrome on Android deals with either state changes or a high number of JS calls differently.

Double click issue: This appears to be a bug either in React or Chrome. Basically, the hyperlink was being triggered after the 0,3ms delay regardless of meta tag, but the onClick was not. So onClick is working as intended. The work-around is to simply move the actual navigation from href to onClick.

Upvotes: 2

Views: 2034

Answers (1)

MortenTZ
MortenTZ

Reputation: 286

I managed to solve both issues.

Freeze issue: Caused by a number of setTimeout calls that modified the state after the page was loaded. Why it would cause issues specifically in Chrome on Android is still a mystery, however. Perhaps Chrome on Android deals with either state changes or a high number of JS calls differently.

Double click issue: This appears to be a bug either in React or Chrome. Basically, the hyperlink was being triggered after the 0,3ms delay regardless of meta tag, but the onClick was not. So onClick is working as intended. The work-around is to simply move the actual navigation from href to onClick.

Upvotes: 3

Related Questions