Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS When scaling image, text on top of it becomes blurry (Chrome)

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #241806
    Aiya
    Participant

    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! :)

    #241808
    bearhead
    Participant

    It just has to do with how browsers handle the rendering of elements during a css transition. AFAIK there isn’t anyway around it aside from eliminating the transform line (which you already know).

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.