I’ve started using REMs to size certain elements on a page so that I can easily adjust their size across the board just by modifying the font-size on the root html element (useful for media queries). However, I’ve noticed an issue in desktop webkit browsers where the elements will resize to match any font-size above 50%, but not any further below.
You can see an example of it happening on this page showing off the technique of sizing elements with REMs. I’ve also included the example code below.
HTML:
<html>
<head>
<meta charset="utf-8">
<title>REM Test</title>
</head>
<body>
<div></div>
Sample Text
</body>
</html>
CSS:
html {font-size: 62.5%}
p {font-size: 2rem;}
.block {background: yellow; width: 10em; height: 10em;}
@media (min-width: 600px) {html {font-size: 70%}}
@media (min-width: 700px) {html {font-size: 80%}}
@media (max-width: 400px) {html {font-size: 50%}}
@media (max-width: 300px) {html {font-size: 40%}}
@media (max-width: 200px) {html {font-size: 30%}}
You can see the box, which is set at 10rem at font-size: 62.5%, render at 100px square. As you scale up the base font-size (via media queries), the box get’s bigger as expected. The box also shrinks down to font-size 50%, but any value below that, the box never gets smaller than 50%. (Text sizes continue to scale down though).
Firefox continues to shrink the box below 50% (haven’t tested IE), so this is likely a webkit only issue.
-webkit-text-size-adjust: none works for mobile webkit, but doesn’t have any effect on the desktop versions.
As anyone else encountered this issue, and devised a solution?
Thanks in advance.
