title: Safari on mobile - computed style is different than given
body: <p>I am writing an Angular (v.9) web application which contains few tiles on the scrolling panel. When given option is out of order I set blurred grey background with text on it. It works fine on desktop chrome/firefox/edge and mobile chrome/firefox. However when I test it on iOS with Safari text becomes too large for the tile. Even though I set font-size property on the &quot;p&quot; element itself:</p>
  <pre><code>&lt;p style=&quot;font-size: 14px&quot;&gt;
  </code></pre>
  <p>sometimes computed style says 21px.
  <a href="https://i.stack.imgur.com/ssw5q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ssw5q.png" alt="screenshot" /></a>
  As you can see, I marked that with red rectangles. Moreover, the issue does not appear on all tiles - as you can see blue one looks fine - font size is 14px. Unfortunately the presence of the issue on the particular tile seems to be totally random. <br>
  I use BrowserStack for testing, problem appears only on all iPhones (checked 8, 10, 11, 12) with Safari. Running Chrome does not produce issue.<br>
  It is not possible to expand &quot;font-size&quot; tree so I have no idea where that value come from, I haven't set 21px anywhere.<br>
  Do you have any ideas how can I force Safari to use given font-size? I've already tried multiple tricks like using !important, changing size based on some properties or even set different font size on click - works on all browsers but Safari.</p>