Apple Mail iOS 15.0.2 iPhone Dark Mode - white text displaying over images that contain text

[obj63mc]

Currently we are seeing a new issue that cropped up and not sure what is causing it or how to work around it.

Essentially we have an email configured for dark mode and have had no issues for over a year but in the latest iOS update, Apple Mail is displaying text over top of our images in dark mode.

Example code for us is simply the following meta tags as you would expect -

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<meta name="x-apple-disable-message-reformatting">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

Then just a normal image tag -

<img src="https://appboy-images.com/appboy/communication/assets/image_assets/images/60942fd4f2a1f4574d1632ff/original.png?1620324308" width="528" style="-ms-interpolation-mode:bicubic;Margin:0 auto;clear:both;display:block;float:none;margin:0 auto;max-width:100%;outline:0;text-align:center;text-decoration:none;width:528px" alt="Earn up to $50*" align="center" class="float-center">

What we are seeing iOS do is the following -

Any ideas why iOS is doing this or has anyone else seen this before. This is completely new and believe its just an apple mail bug that was introduced in the last update that will hopefully be fixed.

[obj63mc]

In our testing we have a possible fix but would love to see if anyone here in this community could run a test as well.

Basically adding on the inline style of the image setting the text color appears to resolve the issue -

color:transparent; -webkit-text-fill-color:transparent;

full image tag example -

<img src="https://...." width="100" style="width:100px; display:block; color:transparent; -webkit-text-fil-color:transparent;" alt="alt text" />

[M-J-Robbins]

I'm assuming this is down to the iOS live text feature.
@obj63mc Are you able to turn live text off to test if this is the cause? It should be in the camera settings

I was trying to reproduce this issue but realised my iPhone 8 doesn't support live text, it's only in iPhone Xs, iPhone XR or later with iOS 15.

[hteumeuleu]

I've got this happening as well since iOS 15 on my iPhone SE (2nd gen). This is definitely related to Live Text. This happened to pretty much every EmailWeekly newsletter so far.

Edit: This happens in Safari 15 as well.

The text is added as a <div id="image-overlay"> in the Shadow DOM of the <img> element.

Looks like this comes from the following styles in EmailWeekly's code:

@media (prefers-color-scheme: dark) {
        h1, h2, h3, h4, p, a {
            color: rgb(255, 255, 255) !important;
            -webkit-text-fill-color: rgb(255, 255, 255) !important;
        }
    }

Disabling the -webkit-text-fill-color declaration fixes the problem and make the text transparent.