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

Question

When using rem as units in css, scaling doesn't really work in Safari (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 */
}

... renders a image in the size of 275px * 95px when the browser window is wider then 600px - in all browsers. Also, when triggering the media query, the image and the background adjusts it's width and height to 220px * 76px.

BUT - using Safari, the width and height is set to 247px * 75px. Which isn't * 0.8, it's something else...

The font-size of the paragraph on the other hand is rendered correctly: 40px when hooked on the query.

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

score 24 · Accepted Answer · edited Jun 11 '15 at 22:03

24

You need to set -webkit-text-size-adjust to none or else webkit will scale up the font size to a readable size:

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

edited Jun 11 '15 at 22:03

Rafa Viotti

9,998
4
42
62

answered Nov 07 '12 at 09:16

fredrik

17,537
9
51
71

Excellent! Turns out that rem works fine with font-size set in pixels too: http://jsfiddle.net/L25Pz/5/ (webkit renders better while resizing between media-queries). – Anders Brohäll Nov 07 '12 at 09:18

score 5 · Answer 2 · edited Nov 30 '18 at 21:14

I solved this problem by changing the percentages by pixels

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

The browser uses a standard font size of 16px. When we use rem for adaptation, for simplicity of calculations we specify a font size of 62.5% of 16px, which is 1em = 10px. When we adapt to other resolutions, we change this value proportionally. For example, for a resolution of 1280px it 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 when in media queries font-size is specified 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.

Hi - could you add some details to your answer about why this works/ — dwjohnston, Nov 29 '18 at 22:58

score 0 · Answer 3 · edited Apr 28 '22 at 15:34

0

You can set the font-size of html to 625%. Next You want to convert your CSS using my fast script:

var css = replace(value, /[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)+rem/g, function (x) {
   return ( parseFloat( (parseFloat(x) * 0.1).toFixed(6) ) ) + "rem";
});

Finlay, your Safari rendering rem correctly.

edited Apr 28 '22 at 15:34

Adam Genshaft

756
10
22

answered Apr 27 '22 at 15:02

Cyc

1

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

3 Answers3

Linked