Outlook iOS app increasing font-size

[M-J-Robbins]

The Outlook app on iOS is increasing font-sizes by adding -webkit-text-size-adjust:125% to all elements that contain a font-size.

In this code sample we should see 2 green squares of the same size next to each other

  <div>
    10px 
    <div style="display:inline-block;height:10px;width:10px;background:green"></div>
    <div style="font-size:10px;display:inline-block">
      <div style="display:inline-block;height:1em;width:1em;background:green"></div>
    </div>
  </div>
  <div>
    20px 
    <div style="display:inline-block;height:20px;width:20px;background:green"></div>
    <div style="font-size:20px;display:inline-block">
      <div style="display:inline-block;height:1em;width:1em;background:green"></div>
    </div>
  </div>
  <div>
    30px 
    <div style="display:inline-block;height:30px;width:30px;background:green"></div>
    <div style="font-size:30px;display:inline-block">
      <div style="display:inline-block;height:1em;width:1em;background:green"></div>
    </div>
  </div>

In Outlook iOS app it's converted to

<div style="font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(26, 26, 26, 0.3); -webkit-text-stroke-width: 0px; text-decoration: none; caret-color: rgb(225, 225, 225); color: rgb(225, 225, 225); font-family: -apple-system, HelveticaNeue; font-size: 20px; -webkit-text-size-adjust: 125%;">
10px<span class="Apple-converted-space"> </span>
<div data-ogsb="green" style="display: inline-block; height: 10px; width: 10px; background-color: rgb(4, 129, 2) !important;"></div>
<div style="font-size: 10px; display: inline-block; line-height: 1.5;">
  <div data-ogsb="green" style="display: inline-block; height: 1em; width: 1em; background-color: rgb(4, 129, 2) !important;"></div>
</div>
</div>
<div style="font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(26, 26, 26, 0.3); -webkit-text-stroke-width: 0px; text-decoration: none; caret-color: rgb(225, 225, 225); color: rgb(225, 225, 225); font-family: -apple-system, HelveticaNeue; font-size: 20px; -webkit-text-size-adjust: 125%;">
20px<span class="Apple-converted-space"> </span>
<div data-ogsb="green" style="display: inline-block; height: 20px; width: 20px; background-color: rgb(4, 129, 2) !important;"></div>
<div style="font-size: 20px; display: inline-block; line-height: 1.5;">
  <div data-ogsb="green" style="display: inline-block; height: 1em; width: 1em; background-color: rgb(4, 129, 2) !important;"></div>
</div>
</div>
<div style="font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(26, 26, 26, 0.3); -webkit-text-stroke-width: 0px; text-decoration: none; caret-color: rgb(225, 225, 225); color: rgb(225, 225, 225); font-family: -apple-system, HelveticaNeue; font-size: 20px; -webkit-text-size-adjust: 125%;">
30px<span class="Apple-converted-space"> </span>
<div data-ogsb="green" style="display: inline-block; height: 30px; width: 30px; background-color: rgb(4, 129, 2) !important;"></div>
<div style="font-size: 30px; display: inline-block; line-height: 1.5;">
  <div data-ogsb="green" style="display: inline-block; height: 1em; width: 1em; background-color: rgb(4, 129, 2) !important;"></div>
</div>
</div>

This is happening in Outlook iOS version 4.2124.0
iPhone 8, iOS15
The webmail, Android app and PWA versions all seem fine.

[hteumeuleu]

Nice find. On my iPhone SE (2nd gen, with a 375px viewport), your code gets a -webkit-text-size-adjust:106% (and not 125%).

[emailwizardry]

I believe this is them implementing Dynamic Type, ie. adapting to the user's Text Size choice as made in their Settings, right? When I choose the smallest font size it sets it to -webkit-text-size-adjust:81%, on the largest it's doing 125%.

[M-J-Robbins]

Ah good find @emailwizardry 👍
I wish they would just use the standard rem which would allow us to work with them to support the users preferences rather than have to work around it.

[emailwizardry]

Agreed @M-J-Robbins! Most disturbingly, after doing some live testing today, it appears that the increased size styling is removed from linked text after you tap to open the link. I set my text size to maximum, then went through and opened some links.. any visited links got turned back to small, ie. 100% / normal size. Absolutely barmy.