search

hteumeuleu / email-bugs

Email quirks and bugs
530 stars 20 forks source link

[Yahoo IOS] trouble in darkmode with png IOS 17 #139

Open Art-Korolev opened 4 months ago

Art-Korolev commented 4 months ago

in dark mode on iOS, the image with a transparent background turns white, and was checked with yahoo and gmail accounts

photo_2024-05-22_12-25-03

JayOram commented 4 months ago

What size is the image? I've found Gmail inverts images under 60px x 60px - could be something similar to this?

Art-Korolev commented 4 months ago

75X75, I checked at different resolutions, the result is the same - white background

Art-Korolev commented 4 months ago

What size is the image? I've found Gmail inverts images under 60px x 60px - could be something similar to this?

i know that android behavoir, ios its ok

Dalinex commented 4 months ago

For iPhone 13, iOS 17 you need qery for yahoo: `

`
Dalinex commented 4 months ago

image

Dalinex commented 4 months ago

Adding class will resolve the bug. <td class="yblack-bg"> First row has class and second don't have class. Unfortunately, this combo isn't available at Email on Acid.

Dalinex commented 4 months ago

Icons I use are 110x110px, but coded as 60x60px. I have different shapes so - this fix is great for icons. You can also use it if you have png - background image with text over - it works. image

Dalinex commented 4 months ago

image

Art-Korolev commented 4 months ago

<td class="yblack-bg"> <a href="#" target="_blank"><img alt="logo" width="124" src="https://storage.googleapis.com/eu1-app-storage/37ae1adc-ffa2-11ed-ab61-c67d0669866c/media/original/7cd11c60-175a-11ef-ad75-3a3e97d1011f" /></a> ``

if i got right

Art-Korolev commented 4 months ago

photo_2024-05-22_17-02-16

maybe i'm doin' somthin' wrong

Art-Korolev commented 4 months ago

photo_2024-05-22_17-37-18 i nailed it, i had to change change color white backgroun #f7f7f7 to #ffffff though

@Dalinex Thanx 4 your invaluable help.

Dalinex commented 4 months ago

You can use more class on that mentioned. This is how I use class: For style: @media (prefers-color-scheme: dark) { .black-bg { background-color: #030303 !important; } .darkmode_font { color: #F1F1F1 !important; }

Dalinex commented 4 months ago

<tr bgcolor="#fffffe" class="black-bg"> <td class="darkmode_font yblack-bg" style="padding:10px;text-align:center;font-family:'Open Sans',sans-serif;font-size:18px;font-weight:normal;line-height:80px;color:#fffffe;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;"><img src="" alt="" style="width: 100%; display:block; margin: 0 auto" border="0"> </td> </tr>

husseinalhammad commented 3 weeks ago

Adding this to the embedded <style> in <head> does the trick:

img {
    background-color: transparent !important;
}

This does assume that you don't have an actual background colour on an any <img> tag.