Hi everyone,
I am working on my portfolio website and I have used transform translate property to position and animate my text content. It looks fine in every modern browser except google chrome. Text looks really blurry, not nice at all. Have any of you encountered this problem before? If yes, what did you do to resolve this issue? Thank you in advance.
Hi monaligosh! That is something I run into all the time. See if replacing your translate property with translate3d works better. Just set a value of 0 for the third value:
#blah {
transform: translate3d("10px", "15px", 0);
}
Let me know if that works. If it doesn’t, send us a link to your animation where we can see it for ourselves.
Hey Hi,
Thanks for your prompt reply. I did try translate3d, but no difference. I didn’t want to use flexbox to lay my main sections, so I used this method to center the elements,
{
transform: translate3d(-50%, -50%, 0);
position: absolute;
top: 50%;
left: 50%;
}
Here is my portfolio link www.monalighosh.com. I would really appreciate it if you could have a look and suggest something to resolve this issue. It’s spoiling the entire look and feel of my website :(. Thank you in advance for your help.
On my computer, the text looks really nice. Is there somewhere in particular I should be looking at?
Oh really!! Can you pls check my projects section. When you click on a project thumbnail, one modal will pop up. Can you pls. check that also. Thanks a ton.
Hey,
Thank you very much. I really appreciate your time. Thanks a ton.
