I am having an issue where html elements are still visible when they are flipped around. I am making a two sided card component that flips when you click the big image. As far as I can tell all elements should hide when I flip it over and most do, however there are two button elements that are still visible when I flip the card over. It doesn't seem to matter what kind of elements they are. One strange thing is that if I take off the padding of the buttons they aren't visible when flipped, but that only works when they are buttons. I have tried putting backface-visibility: hidden on them explicitly and that did not work. I tried using different kinds of elements or not using imported elements. I am using React and styled-components. You can see the issue here: https://codesandbox.io/s/hungry-architecture-rsjfb?file=/src/components/infoCard/InfoCardStyled.js

You might have to slide up the console until the image becomes small enough that the buttons (InfoCardComponent.Quantity and InfoCardComponent.AddCart) pop out.

If the link doesn't take you directly there, you need to click info on any of the front page items, the brown jacket is a good one because the image is vertical.