Mobiles Problem: transform: scale() ändert die Größe des Bildes beim Klicken

Question

Ich habe 4 soziale Symbole, die eine Transformationseigenschaft mit einem Skalierungswert (1.5) bei Hover haben.

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

     &:hover 
      transform: scale(1.5) 

Der Hover-Effekt funktioniert wie auf dem Desktop gedacht, sondern auf einem Handy-Display bewirkt, dass die sozialen Symbole klicken sie dort auf einer Skala von 1,5 und bleiben ändern. Ich weiß nicht, was das verursacht. Irgendwelche Gedanken?

Answer 1

Dies ist, weil mobile Geräte nicht die gleiche Weise mit der :hover Pseudo-Klasse als verhalten. Der Browser hat keine Möglichkeit zu wissen, wo Sie sich befinden, bis Sie auf das Element tippen, und dann werden die Hover-Stile hinzugefügt. Die Skalierung verschwindet, wenn Sie anderswo tippen.

Leider gibt es keine CSS-Lösung für diese out of the Box. Du brauchst JavaScript. Für eine reine CSS-Lösung empfehle ich Ihnen, @media Abfragen zu verwenden, um nur großen Bildfenstern :hover Stile zuzuweisen, aber dann stoßen Sie auf Tablet-Probleme.