Safari on mobile - computed style is different than given

Question

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 "p" element itself:

<p style="font-size: 14px">

sometimes computed style says 21px. 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.
I use BrowserStack for testing, problem appears only on all iPhones (checked 8, 10, 11, 12) with Safari. Running Chrome does not produce issue.
It is not possible to expand "font-size" tree so I have no idea where that value come from, I haven't set 21px anywhere.
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.

Answer 1

Try this (only for iPhones)

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}

and also make sure your code has the correct device meta tag

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />

Answer 2

This is the mixin that I use for the Safari browsers

@mixin safari-only {
  @supports (-webkit-marquee-repetition: infinite) and (object-fit: fill) {
    @content;
  }
}

You can use that in your .scss file as follows:

@include safari-only() {
  // your CSS
}