Text stability in iOS
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
.
Why it's not recommended to configure this setting to none?
Setting the
-webkit-text-size-adjust=none
affects the DOM & changes the visual perception of the webpage, that make the webpage looks different during testing from what a user will see on the iOS device.

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;
}
Updated about 1 year ago