I’m building a UI that shows/hides certain elements based on what “state” the user is in. The user can transition between states by clicking around the screen.
My HTML renders every element that could be shown. Then Stimulus kicks in and on
connect() adds the
hidden class to elements that shouldn’t be shown.
This works great on Safari. However, in Chrome there is a noticeable flicker or “popping” of elements when the page loads.
- Is this the right approach? If not, is there a recommended way of handling this?
- Any idea as to why this would happen in one browser and not the other?
Edit: Here’s an example project in Glitch that shows the flicker. Open the project’s live page in Chrome and refresh a few times and you will see the flicker. Yet no matter how many times you refresh in Safari it won’t occur.