Geek Answers Handbook

CSS background snap and font

I have a really weird problem with my background. When I change the binding of the background to the fixed one in css, the font in my menu becomes, for some reason, smaller than I can not understand. When I changed it to scroll or local, it returned to the estimated size. Is there a reason why this is happening?

Edit

Providing an example for the OP:

The problem arises for me only in Safari (Chrome is fine) and only on some computers (played on MacBook Pro 15) with non-retina displays, but not on computers with iMacs and retina displays). OSX: 10.8.5, 10.9.1 Safari Versions: 6.1.1, 7.0.1.

Unfortunately, I cannot reproduce this problem using jsfiddle, since it does not occur in the iframe (however, the contents of the iframe react to it, which strongly indicates an IMHO browser error).

Here is an example HTML that you can view locally:

<html>
    <body style="background-image: url(http://static4.depositphotos.com/1000419/321/v/950/depositphotos_3210195-Art-tree-beautiful-black-silhouette.jpg); background-attachment: fixed;">
    <p style="font-family: Arial; font-size: 30px;">some fun text</p>
    </body>
</html>

Select the body tag in the inspector and switch the rule background-attachment. What you will see is that the font changes a bit (finer / bolder).

I would like to know how much this is a problem and which machines are affected, so that the problem may eventually reach some bad Apple dev ... :)

Update

Interesting fact: -webkit-transform: translateZ(0);can be used as a workaround. Why it works, I don’t know ...

+5
3

Safari, :

-webkit-font-smoothing: subpixel-antialiased;

-webkit-transform: translateZ(0); .

+2

translateZ(0) hack , .

,

0

You can try any of them:

-webkit-font-smoothing: antialiased;

-webkit-transform:translateZ(0);

-webkit-transform: scale(1);

-webkit-transform:rotate(360deg);

Font smoothing did this a couple of times when strange problems with the font appeared in Safari.

0
source

More articles:


All Articles