CSS Fixed Position Font Changing

Question

When I apply position:fixed to an element, the font renders much thinner and pixelated. If the position is relative or absolute, the font renders cleanly.

I've noticed the issue in both Firefox and Safari. What's happening?

Edit

Here is an image showing the difference in text. The only thing being changed is the position. The effect is similar in Safari, but less dramatic.

The CSS font-smoothing and anti-alias suggestions don't seem to make a difference.

font render example

Provide an example of your code. A snippet would help get better answers. — DreamTeK, Apr 01 '15 at 07:17
You might want to read this thread : http://stackoverflow.com/questions/3730561/web-safe-font-weights-how-to-get-thinner — Bladepianist, Apr 01 '15 at 07:19

Ben · Answer 1 · 2015-04-01T07:22:49.910

1

This might be a rendering issue. Try this on the element for better rendering:

-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;

edited Apr 01 '15 at 07:22

answered Apr 01 '15 at 07:17

Ben

11
2

Thanks so much, I had this problem and this was the solution! – Luke Taylor Feb 27 '16 at 02:58

score 0 · Answer 2 · answered Apr 01 '15 at 07:15

0

Try to use z-index: 1 and position relative on the parent element. See solution in this video:

https://www.youtube.com/watch?v=9Woaz-cKPCE&hd=1

I can imagine it has something to do with each other.

answered Apr 01 '15 at 07:15

Remo L.

720
6
19

CSS Fixed Position Font Changing

2 Answers2