Safari berechnet keine Rem-Einheiten korrekt, wenn mit @media skaliert wird (width/height/background-size)

Question

Wenn rem als Einheiten in CSS verwendet wird, funktioniert die Skalierung in Safari (PC und Mac) nicht wirklich.

Beispiel befindet sich bei 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 */ 
} 

... macht ein Bild in der Größe von 275px * 95px, wenn die Browserfenster ist breiter als 600px - in allen Browsern. Beim Auslösen der Medienabfrage passt das Bild und der Hintergrund seine Breite und Höhe auf 220px * 76px an.

ABER - mit Safari sind die Breite und Höhe auf 247px * 75px eingestellt. Was ist nicht * 0.8, es ist etwas anderes ...

Die Schriftgröße des Absatzes auf der anderen Seite ist richtig gerendert: 40px bei der Abfrage eingehakt.

Mighty seltsam, wenn Sie mich fragen. Hat jemand eine Lösung?

Answer 1

Sie müssen -webkit-text-size-adjust-none oder sonst webkit eingestellt wird die Schriftgröße auf eine lesbare Größe skalieren:

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