See pen here
So far I have seen this only happening in Chrome.
I have a container div that contains an image and line of text.
When hovering the image, it scales up and works as expected. But the text becomes slightly blurry and moves a tiny bit, which is the problem.
The issue seems to be caused by my method of centring text – css transforms. When removing the following line (and the prefixed one), text looks fine when hovering on image (obviously not centred anymore but that’s not the issue):
transform: translate(-50%, -50%);
Could someone explain why this is happening please? Is there a way to fix it without changing the method of centring the text?
Thanks! :)