jakewies jakewies - 1 year ago 68
HTML Question

Mobile issue: transform: scale() resizes image when clicked

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

transform: scale(1.5)

The hover effect works as intended on desktop, but on a mobile screen clicking the social icons causes them to resize to a scale of 1.5 and stay there. I don't know what is causing this. Any thoughts?

Answer Source

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.

Sadly, there is no CSS solution for this out of the box. You'd need JavaScript. For a purely CSS solution, I recommend you use @media queries to assign :hover styles only to large viewports, but then you run into tablet issues.