5

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?

Edit

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... :)

Update

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

Community
  • 1
  • 1
user1034842
  • 89
  • 2
  • show your code. Try adding `!important` before the `;` – Zhianc Nov 13 '11 at 10:31
  • @jcdavid: I´d recommend to never use `!important` unless its absolutely necessary. Once the OP posts an example, I am sure we can figure out to solve his problem without abusing `!important` – r0skar Nov 13 '11 at 15:12
  • If you really want that a "tag", "class" or "id" should have a value that should not be changed, you have to write "!important" after your value. In this and in your case, you need to write "font-size: 30px !important;".But if you have a high "font-size" value so you can already use a "h1" tag. –  Feb 16 '14 at 12:31

3 Answers3

2

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.

Giacomo Petrillo
  • 369
  • 2
  • 9
0

Using the translateZ(0) hack enables hardware acceleration, which has some impact on image rendering and UI redraw in general.

Be warned that it may also have performance impacts

Community
  • 1
  • 1
Feugy
  • 1,898
  • 14
  • 18
0

You could try any of these:

-webkit-font-smoothing: antialiased;

-webkit-transform:translateZ(0);

-webkit-transform: scale(1);

-webkit-transform:rotate(360deg);

The font smoothing has done the job for me a couple of times when there were strange font issues on Safari.

Jon Snow
  • 3,682
  • 4
  • 30
  • 51
  • As I wrote in the post: `translateZ(0)` works for me. The question however is not about finding a workaround. – Max Leske Feb 19 '14 at 17:05
  • 1
    A short answer on _why_ it works is because adding the transform property promotes the element to a new gpu layer, I am not very competent in this but there's a good talk about it here: https://www.youtube.com/watch?v=n8ep4leoN9A – Jon Snow Feb 19 '14 at 17:47