Safari không tính toán đơn vị chính xác khi chia tỷ lệ với @media (width/height/background-size)

Question

Khi sử dụng rem làm đơn vị trong css, việc chia tỷ lệ không thực sự hoạt động trong Safari (cả PC và Mac).

Ví dụ đặt tại 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 */ 
} 

... ám một hình ảnh trong kích thước của 275px * 95px khi cửa sổ trình duyệt rộng hơn 600px - trong tất cả các trình duyệt. Ngoài ra, khi kích hoạt truy vấn phương tiện, hình ảnh và nền điều chỉnh chiều rộng và chiều cao của nó thành 220px * 76px.

NHƯNG - khi sử dụng Safari, chiều rộng và chiều cao được đặt thành 247px * 75px. Mà không phải là * 0.8, nó là cái gì khác ...

Kích thước phông chữ của đoạn văn khác được hiển thị chính xác: 40px khi được nối vào truy vấn.

Rất lạ nếu bạn hỏi tôi. Bất cứ ai có giải pháp?

Answer 1

Bạn cần phải thiết lập -webkit-text-size-adjust-none hoặc webkit khác sẽ mở rộng quy mô cỡ chữ đến một kích thước có thể đọc được:

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