title: REM font size not adjusting below arbitrary threshold
body: <p>In Safari 12.0.2 and Chrome 71.0.3578.98 on Mac Mojave 10.14.2, when setting the <code>font-size</code> using <code>rem</code> units, the actual size won't go below <code>9px</code>.</p>
  
  <p>See this example:</p>
  
  <p><a href="https://codepen.io/stephenjwatkins/pen/OrbGxL" rel="noreferrer">https://codepen.io/stephenjwatkins/pen/OrbGxL</a></p>
  
  <p><a href="https://i.stack.imgur.com/5WKTw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5WKTw.png" alt="Rendered font size"></a></p>
  
  <p>My browser's font size is set to the default (<code>16px</code>) with a minimum font size set to <code>6px</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/3vOVq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3vOVq.png" alt="Browser font settings"></a></p>
  
  <p>Setting <code>text-size-adjust</code> to <code>none</code> doesn't affect the problem. Firefox renders the size correctly.</p>
  
  <p>The only thing that I've found to fix the problem is setting <code>font-size: 0;</code> to a parent element. For instance, if you add <code>font-size: 0;</code> to <code>.container</code>, the correct font size is rendered.</p>
  
  <p>Does anyone know why it's not honoring the <code>rem</code> size below a certain threshold?</p>