I'm currently working on creating the material ripple effect using styled-components, since importing the material web-components mixins is not possible. I am specifically focusing on maintaining the accessibility tree by utilizing the after element for the foreground effect.
Unfortunately, I have noticed that on mobile devices, there is a reflow issue with the button's content due to the ripple transition. This seems to be triggered by the display change from none to block. Despite trying alternative solutions to mitigate this artifact, the side-effect persists.
Below is my code snippet (I use props to configure the ripple, but feel free to set them manually for testing purposes): [Outdated code version was here]
Thank you for your attention.
Edit: Strangely, the bug only occurs when a hover effect is added to the button. Below is the link and code sample (please note that setting up a react repository is required to reproduce it)
https://github.com/Eduardogbg/ripple-hover-reflow-bug
import React, { useRef, useReducer } from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components'
const ButtonBase = styled.button`
// Styling details
`
// More code continues below...