Geek Answers Handbook

Safari doesn't calculate the correct units when scaling with @media (width / height / background size)

When using rem in units in css, scaling really doesn't work in Safari (on both PC and Mac).

Example located at http://jsfiddle.net/L25Pz/3/

Markup:

<div> <img src="http://www.google.com/images/srpr/logo3w.png" /> <p>Lorem ipsum dolor sit amet</p> </div>

CSS:

 html { font-size:62.5% } div { background:url(http://www.google.com/images/srpr/logo3w.png); background-size:275px 95px; background-size:27.5rem 9.5rem; background-repeat:no-repeat; } img { width:27.5rem; height:9.5rem; } p { font-size:5rem; } @media only screen and (max-width: 500px) { html { font-size:50%;} /* should render everything * 0.8 */ }

... displays an image of 275px * 95px in size when the browser window is wider and 600 pixels in all browsers. In addition, when starting a media query, the image and background adjust its width and height to 220px * 76px.

BUT - using Safari, the width and height are set to 247px * 75px. Which is not * 0.8, it is something else ...

The paragraph font size, on the other hand, is displayed correctly: 40 pixels when connected to a request.

Mighty weird if you ask me. Anyone have a solution?

+7
source share
3 answers

You need to set -webkit-text-size-adjust to none , otherwise webkit will increase the font size to a human-readable size:

 @media only screen and (max-width: 500px) { html { font-size:50%; -webkit-text-size-adjust:none; } /* should render everything * 0.8 */ }
+16
source

Is there a modern solution? -webkit-text-size-adjust no longer a valid key.

0
source

I solved this problem by changing percentages by pixels

  @media (max-width: 96em) { html { font-size: 8px; } }

The browser uses a standard font size of 16 pixels . When we use rem for adaptation, for simplicity of calculation, we specify a font size of 62.5% of 16 pixels, which is 1em = 10px. When we adapt to other permissions, we proportionally change this value. For example, for a resolution of 1280px this will be

1920/1280 = 1.5, 62.5 / 1.5 = 41.667 (%).

At 1440px - 62.5 / (1920/1440) = 46.875 (%).

All browsers except Safari understand that in media queries the font size is indicated as a percentage. I solved the problem by converting the percentage to pixels.

1280: 41.667% * 16px = 6.66672 px

1440: 16 * 0.46875 = 7.5.

And so on.

0
source

More articles:


All Articles