Bug 309551 – iOS does not honor font-size under specific circumstances

• Component: Layout and Rendering
• Status: RESOLVED WONTFIX

Created attachment 478609 [details]
Bug issue

Hello,

We're facing a very odd bug, only reproducible on Safari iOS (not reproducible on Safari Mac or any other browsers). We've spent some time trying to debug this but could not understand why this is happening.

Also, we were not able to re-create a minimal test case so we assume that this might be a set of combinations leading to this bug.

The problem is that Safari simply does not honor the font size (we set for instance a font size of 20px, but it is rendered as something different).

To reproduce this issue, open on iOS device this page: https://prestige-support.myshopify.com

The first time you will need to enter a password to enter the page. The password is rewblo

After entering the page, please look at the marquee text. You can see that the circled word Test is rendered smaller than the rest of the text, despite being the exact same font size.

We've been unable to find any workaround for this issue, so we would appreciate if someone could check why this is happening :)

Thanks.

[Ahmad Saleem]

<em><split-lines class="is-split"><template shadowrootmode="open"><span part="line" style="display: inline-block;">amet
    <svg part="shape circle-shape" preserveAspectRatio="none" viewBox="0 0 239 112" fill="none">
      
      <path part="path" false="" stroke="currentColor" stroke-linecap="round" stroke-width="2" vector-effect="non-scaling-stroke" d="M209.793 7.563c-3.761-.066-7.336-.809-11.059-1.198-10.522-1.1-21.334-1.187-31.894-1.589-17.861-.68-35.657-.632-53.487.755-17.875 1.39-36.15 3.045-53.724 6.72-17.695 3.699-32.947 11.442-45.652 24.193C8.604 41.836 3.724 46.924 1.712 54.49c-1.766 6.646-.057 13.37 3.04 19.376 7.31 14.176 24.289 21.161 38.576 25.938 31.322 10.471 65.275 12.613 98.066 10.417 18.208-1.22 36.408-3.315 54.221-7.344 9.566-2.164 19.614-4.969 28.225-9.844 9.515-5.388 15.133-14.411 14.02-25.392-1.145-11.3-8.044-20.744-15.828-28.594-15.36-15.49-37.406-23.105-58.153-28.569C140.302 4.271 116.23 1 91.863 1"></path>
    </svg>
  </span></template>amet</split-lines></em>

^ HTML Markup of code.

[Alexey Proskuryakov]

I'm guessing that this is text autosizing, cf. bug 296524 for workaround.

[Simon Fraser (smfr)]

Confirmed, this is text autosizing.

Put `-webkit-text-size-adjust: none` on the element or an ancestor to fix it.