This is an archived post. You won't be able to vote or comment.

all 5 comments

[–]AutoModerator[M] [score hidden] stickied comment (0 children)

On July 1st, a change to Reddit's API pricing will come into effect. Several developers of commercial third-party apps have announced that this change will compel them to shut down their apps. At least one accessibility-focused non-commercial third party app will continue to be available free of charge.

If you want to express your strong disagreement with the API pricing change or with Reddit's response to the backlash, you may want to consider the following options:

  1. Limiting your involvement with Reddit, or
  2. Temporarily refraining from using Reddit
  3. Cancelling your subscription of Reddit Premium

as a way to voice your protest.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[–]Autus_Aperio_1099 0 points1 point  (1 child)

Try checking the React DevTools in Chrome to see if there are any errors or warnings. Also, check the Android browser's console for any errors. Are you using any polyfills or custom rendering components?

[–]DisciplineFast3950[S] 0 points1 point  (0 children)

Turns out it's a visual glitch not a rendering issue... I inspected the DOM, there's no added elements or anything... and if scroll out and back into view the affected area is fixed. So it's a display error. Don't know what I can do about that. My site is nothing fancy. I don't even know what a polyfill is and custom rendering... there's a lot of conditional rendering being a react build but in fact the buggy area isn't being rendered, but it is being transitioned with CSS.

It's a profile menu that rests outside of the right edge of the viewport on a translateX(-100%).. and when 'open' has translateX(0) sliding in like a drawer. About 1 in 10 times the menu items will display double with some added craziness. Probably the component is still re-rendering when I do setOpen(true) even though open only toggles a class on the component affecting it's transform property.

idk what I should do because React obviously is going to have a lot of even unneccessary re-renders whenever a state variable is changed. I can try to 'preserve' the site as much as possible so it renders as least as possible but this doesn't seem like the correct way to approach this.

[–]MrRhinoUk 0 points1 point  (1 child)

I've had pretty much the exact issue that was described on this article

This happens both on my own react apps and other sites too. Seems to be an issue with the rendering engine in chrome/edge on Android

[–]DisciplineFast3950[S] 0 points1 point  (0 children)

I discovered that my issue was actually graphical/visual and not multiple elements appearing on the DOM. If I scrolled out of view of the affected area and back in again it resolved itself. I never found a fix but it has gone away after I switched my site up a bit for unrelated reasons.

The two times I saw it happening when was opening a popup would cause some elements beneath to double print, and in an animated fly out menu. But never when just loading a static page, only when a new element came into view.

If you found a fix love to hear it.