Text Stability in iOS

Learn how to fix text stability issues in iOS during visual testing

iOS Safari has a text inflation algorithm for iPhones and iPads. This algorithm determines the text size on page load, which might be inconsistent and depends on the DOM of the website.
You can set -webkit-text-size-adjust to none instead of auto to make text rendering consistent

This property is specific to mobile devices and does not affect any desktop browsers.

Here is an example of changes in text size when kept in auto:

This inconsistency is only observed in th, td HTML elements, specially when text inside them & animations are present with src = data:image/gif || data:image/svg+xml.

How to handle this use case?

• Do not use animations with data:image inside tables, as shown in example:

<td>
<img src="data:image/gif;base64,image_base64_string">
</td>

• If you have to use the above code style, you can set the -webkit-text-size-adjust=none for consistent visual testing.
  Example:

td, th {
      -webkit-text-size-adjust: none !important;
   }