- This topic is empty.
February 25, 2016 at 9:19 am #238451
When you hover over the text, if you pay close attention, you’ll notice that after it scales down it makes a weird ‘adjustment’… for lack of a better word.
It kinda looks like some letters move… or the kerning changes… or the font gets a little thicker… It’s subtle, but you can clearly see something’s happening…
What is it? How do I get rid of it?
Thanks.February 25, 2016 at 9:40 am #238453ShikkedielParticipant
My guess is that it’s just optical, caused by opposite contrast.February 25, 2016 at 9:52 am #238456
Do you think so?
I’m pretty sure there’s something really happening.February 25, 2016 at 9:53 am #238457bearheadParticipant
I think shikkediel is right that the font appearing bolder is just based on our perception.
The letter moving issue is most apparent in firefox (didn’t see it at all in chrome, ie was pretty ok)
I think it is just a result of how FF renders and scales fonts.
Also, the scaling and transitions are not running in IE or FF (as you have it coded). I noticed that you had a missing semi colon, and I think there is something goofy going on with your prefixes…February 25, 2016 at 11:40 am #238459David SchiffnerParticipant
You have transform:scale(0.945) as a rule set on .button:hover
When you mouse over the text, the text/button is going to scale because of this.February 25, 2016 at 12:36 pm #238460ShikkedielParticipant
That’s missing a semicolon after the general rule – so it’s not doing anything with FF. I therefore thought it was about a slightly more subtle effect.February 26, 2016 at 8:20 am #238488
Thanks for your input guys.
I’ve added the missing semicolon.
The text looking bolder was definitely not optical. It’s a rendering issue caused by the browser. Maybe not everybody will notice it or care too much about it, but people with a design background, like me, will spot it.
font-smoothing:antialiased minimizes the issue to a certain extent. It’s still not perfect, but I don’t think there’s much more (or anything else!) that can be done…
That said, some of the letters still move after the scaling is complete. Like there’s a kerning adjustment…
What’s bugging me is that with this text size it’s very easy (at least for me) to see and a definite eyesore!!!
The smaller the text is, the harder it is to notice it… although it still happens! While if I make the text substantially bigger, it no longer happens! Weird, very weird…
David, you were joking, right?
That was definitely not was I was talking about.February 26, 2016 at 12:53 pm #238511David SchiffnerParticipant
I misread the original problem :)
I had first opened it in Chrome and didn’t see what you were talking about. Anyways, now that I understand what the issue is – I still see it in firefox/safari. Nothing in chrome. Very weird issue to say the least.February 27, 2016 at 1:04 pm #238532
No worries. It was actually kinda funny. :)
I haven’t tested with other browsers, but it’s very noticeable in Safari.
It might not seem a big deal to some folks, but being the design maniac that I am, this is driving me c-r-a-z-y!!! lol
If anybody knows why this is happening or has any ideia on how to prevent it from happening, I’m all ears.
- The forum ‘CSS’ is closed to new topics and replies.