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?
rem (root em) units is Fully Supported on Safari 7.1, which means that any user who'd be accessing your page through Safari 7.1 can see it perfectly.
rem (root em) units on Android Browser is fully supported on 2.3-103, partially supported on None of the versions, and not supported on below 2.3 Android Browser versions.
Unit rem in media queries always uses the default font-size in browser settings, and is not affected by font-size of html except for existing bug in WebKit engine (Safari, chrome for iOS, …). So, you should use em instead of rem with media queries before the bug's fixed.
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 */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With