I have 4 social icons that have a transform property with a value of scale(1.5) on hover.
margin: 0 20px
transition: scale 200ms ease-in-out
This is because mobile devices don't behave the same way with the
:hover pseudo-class as. The browser has no way of knowing where you're hovering over until you tap the element, and that's when it adds the hover styles. The scaling will go away when you tap elsewhere.
@media queries to assign
:hover styles only to large viewports, but then you run into tablet issues.