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.

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

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

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

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

Art-Korolev opened this issue May 22, 2024 · 13 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

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

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

<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

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

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

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

No branches or pull requests

4 participants