Menu
I have a really weird problem with my background. When I change background-attachment to fixed in css, font in my menu becomes smaller for some reason that I can't figure out. When I changed it to scroll or local it gets back to supposed size. Any reasons why is that happening?
Providing an example for OP:
The problem occurs for me only in Safari (Chrome is ok) and only on certain machines (reproducible on MacBook Pros 15" with non-retina displays but not on iMacs and retina display machines). OSX: 10.8.5, 10.9.1 Safari versions: 6.1.1, 7.0.1.
Unfortunately, I cannot reproduce this problem with jsfiddle, as it does not occur within iframes (the content of the iframe reacts to it however, which strongly suggests a browser bug IMHO).
Here's sample HTML instead that you can look at 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 toggle the background-attachment rule. What you'll see is that the font changes slightly (slimmer / bolder).
I'd like to find out, how much of a problem this is and what machines are affected, so that the problem might eventually reach some poor Apple dev... :)
Fun fact: -webkit-transform: translateZ(0); can be used as a workaround. Why it works I don't know...
833
I had a similar problem with Safari, and this definitely solved it:
-webkit-font-smoothing: subpixel-antialiased;
whereas -webkit-transform: translateZ(0); wasn't always useful.
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
