Edit Question - KnowledgeHub

Title Body

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?

Tags (comma-separated) Cancel