Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Art-Korolev opened this issue May 22, 2024 · 15 comments
Open

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

Art-Korolev opened this issue May 22, 2024 · 15 comments
Labels
Yahoo Webmail, iOS and Android apps

Comments

@Art-Korolev
Copy link

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
@hteumeuleu hteumeuleu added the Yahoo Webmail, iOS and Android apps label May 22, 2024
@JayOram
Copy link

JayOram commented May 22, 2024

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

@Art-Korolev
Copy link
Author

Art-Korolev commented May 22, 2024 •
edited
Loading

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

@Art-Korolev
Copy link
Author

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
Copy link

Dalinex commented May 22, 2024 •
edited
Loading

For iPhone 13, iOS 17 you need qery for yahoo:
`<style>
@media screen yahoo and (max-width:413px) {
.yblack-bg {
.ydivdark[class=divdark] {
background-color: rgba(255,255,255,0.00);
}
}
.yfix{}
.yblack-bg {
background-color:rgba(255,255,255,0.00);
}
}
</style>

`

@Dalinex
Copy link

Dalinex commented May 22, 2024

image

@Dalinex
Copy link

Dalinex commented May 22, 2024

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
Copy link

Dalinex commented May 22, 2024

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
Copy link

Dalinex commented May 22, 2024

image

@Art-Korolev
Copy link
Author

Art-Korolev commented May 22, 2024 •
edited
Loading

<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
Copy link
Author

photo_2024-05-22_17-02-16

maybe i'm doin' somthin' wrong

@Art-Korolev
Copy link
Author

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
Copy link

Dalinex commented May 22, 2024 •
edited
Loading

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
Copy link

Dalinex commented May 22, 2024 •
edited
Loading

<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
Copy link

husseinalhammad commented Sep 11, 2024 •
edited
Loading

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.

@Art-Korolev
Copy link
Author

Thanx,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Yahoo Webmail, iOS and Android apps
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@hteumeuleu @husseinalhammad @JayOram @Dalinex @Art-Korolev