Mac Safari Font Rendering changes thinner when any Element on the page gets position:fixed;

Question

The following problem occurs only on Safari for OS X.

My problem is that if I make one Element with position: fixed, it renders the font smaller than when I don't have that Element loaded.

Here's a link to an example of said problem: http://www.noticekom.ch.k1859.ims-firmen.de/home.html

The element is used on 'Home' & 'Agentur'. On both of these sites; the rendering of the text is smaller than others. The fixed position is used to make the effect from the last content on the homepage. When I switch it to position: absolute; the font renders normally, but the effect obviously is not working.

Does anyone know a workaround for that?

Answer 1

body { -webkit-font-smoothing: subpixel-antialiased; }

This made it :)

Answer 2

This worked for me

-webkit-font-smoothing: antialiased;

Answer 3

Webkit-font-smoothing didn't work for me. Adding a background to the element to make sure it is fully opaque worked

Safari changing font weights when unrelated animations are running