The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS REM for element sizing not working below font-size 50% in webkit

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #169530
    Nathan Adams

    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.


      <meta charset="utf-8">
      <title>REM Test</title>
      Sample Text


    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.


    Hmm, the box continues to scale down even to the smallest media query for me. I’m viewing it in Chrome: Version 34.0.1847.131 m


    I believe that Webkit/Chrome has a hard limit on how small you can make the font-size.

    6px as I recall…something to do with Chinese characters….or was that mobile only?

    Hmmm…I may have to google.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.