title: Font size display issue on Google Chrome for Android
body: <p>I have a webpage where the font-size of <code>body</code> 16px.</p>
  
  <p>On Google Chrome for Android, I have the following problem: When the page initially loads, the font size in elements which don't have a font-size defined (and therefore inherit the font-size from the body) is bigger than 16px (as you will see if you read on, there is no obvious way to calculate the multiple to which the size of the rendered text is bigger). When the user scrolls down the rendered text size changes to 16px.</p>
  
  <p><strong>See the two images below for a visualisation</strong>
  <a href="https://i.stack.imgur.com/vHH9h.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vHH9h.png" alt="Here the page has loaded and the user has not interacted with the page"></a></p>
  
  <p><em>In the above screenshot the page has loaded and the user has not interacted with the page.</em></p>
  
  <p><a href="https://i.stack.imgur.com/rCUH2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rCUH2.png" alt="enter image description here"></a>
  <em>In the above screenshot the page has loaded and the user has interacted with the page. Notice how the font size on the element showing "0% interest" is now smaller</em></p>
  
  <h2>When the text is larger and smaller - both sizes compute as 16px</h2>
  
  <p>Despite the fact that there is a visual difference between the two font-sizes. Before the user scrolls and the text is larger and after the user scrolls and the text size is smaller — the font-size in all cases computes as 16px.</p>
  
  <p><a href="https://i.stack.imgur.com/R4zRd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/R4zRd.png" alt="enter image description here"></a>
  <em>In the above image we can see that the font-size is in both cases 16px but that the two rendered texts are clearly different in size</em></p>
  
  <h2>What happens if the size is changed?</h2>
  
  <p>If I change the of the text, the rendered text size increases or decreases (depending on whether or not the number is greater or less than 16). In both cases though the text size increases in proportion to the original text size.</p>
  
  <p>It seems like the browser is showing 16px as a certain size and that it then changes this size when the user scrolls.</p>
  
  <p><a href="https://i.stack.imgur.com/SRYhC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SRYhC.png" alt="enter image description here"></a> 
  <em>Here I've increased the font-size to 20px. Whilst the font size does increase, it increases in proportion to the original rendered text size</em></p>
  
  <h2>Could Javascript be responsible this?</h2>
  
  <p>I don't think so. I have disabled javascript in the browser and reloaded the page and the problem still persists.</p>
  
  <p>Does anyone have an idea about what might be causing this?</p>