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

Improve this question
3
  • show your code. Try adding !important before the ; Commented Nov 13, 2011 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 Commented Nov 13, 2011 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. Commented Feb 16, 2014 at 12:31

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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

Improve this answer

1 Comment

I'm aware of that, I'm looking more for a why and who with what machine.
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.

Improve this answer

2 Comments

As I wrote in the post: translateZ(0) works for me. The question however is not about finding a workaround.
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: youtube.com/watch?v=n8ep4leoN9A

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.