Safari nie oblicza rem jednostek poprawne podczas skalowania za pomocą @media (szerokość/wysokość/rozmiar tła)

Question

Podczas używania rem jako jednostek w css, skalowanie nie działa tak naprawdę w Safari (zarówno na PC, jak i na Macu).

Przykład znajduje się 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 */ 
} 

... renderuje obraz w rozmiarze 275px * 95px gdy Okno przeglądarki jest szersze niż 600 pikseli - we wszystkich przeglądarkach. Ponadto podczas wyzwalania zapytania o media obraz i tło dostosowują jego szerokość i wysokość do 220 pikseli * 76 pikseli.

ALE - używając przeglądarki Safari szerokość i wysokość jest ustawiona na 247 pikseli * 75 pikseli. Która nie jest * 0.8, to coś innego ...

Rozmiar czcionki akapitu z drugiej strony jest renderowany poprawnie: 40 pikseli po podłączeniu do zapytania.

Niezwykle dziwny, jeśli mnie zapytasz. Ktoś ma rozwiązanie?

Answer 1

Musisz ustawić -webkit-text-size-adjust do none lub innego WebKit będzie skalować rozmiar czcionki do czytelnej wielkości:

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