jakewies jakewies - 6 months ago 13
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.

.social-icon
margin: 0 20px
transition: scale 200ms ease-in-out

&:hover
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

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.

Comments