Updated support data: <picture> #419
Conversation
|
I'm very curious about this one! Could you elaborate what you mean by ” |
|
I've just updated the PR description now. As you can see, the results are quite strange and inconsistent. I cannot pin point what is exactly causing this issue yet. I do agree, the note can be made more clear. Do you have any suggestions on how I can improve the note I added? |
|
@DCoder18 Could you share the code from the first faulty test? |
|
Here you go. In this case, both the <!DOCTYPE html>
<html>
<head>
<title>picture element</title>
</head>
<body>
<h1>picture</h1>
<h1><code>picture</code> with <code>img</code></h1>
<picture>
<source srcset="https://40daystemp3.testi.at/placeholder/600x600/F4F4F4/5a5a5a.png?text=Small" media="(max-width: 480px)" />
<source srcset="https://40daystemp3.testi.at/placeholder/600x600/F4F4F4/5a5a5a.png?text=Medium" media="(max-width: 640px)" />
<source srcset="https://40daystemp3.testi.at/placeholder/600x600/F4F4F4/5a5a5a.png?text=Large" media="(min-width: 641px)" />
<img src="https://40daystemp3.testi.at/placeholder/600x600/F4F4F4/5a5a5a.png?text=Default" alt="" style="display:block; width:100%; height:auto;" />
</picture>
<img src="https://40daystemp3.testi.at/placeholder/600x600/F4F4F4/5a5a5a.png?text=Default" alt="" style="display:block; width:100%; height:auto;" />
</body>
</html> |
|
@DCoder18 Thank you! It looks like to make this email work properly, all that's needed is to add background to the body ( There might also be a problem with your image host ( |
|
I tried using an image host that allows CORS (https://placehold.co/600x400?text=Large). I still see the previous issue. However, when I tried adding a background color to the body like you suggested, it works. So, maybe CORS is not the issue here, rather a heuristics case like you mentioned. Do you think that's worth mentioning as a note? |
The expected result is we see the appropriate placeholder images (large to small) according to the screen size. If this is not supported, we should see a placeholder image with the Default text on it.
In Apple Mail, there is an odd issue where the
picturetag and its child elements gets stripped along with any sibling elements in certain use cases. I have included testi links below with some of the use cases.picture tag with img
pictureandimgtags are stripped.picture tag with text wrapped in div
This works as expected. However, an empty
divtag strips thepicturetag again.I tried using
imgand<div>Text</div>together withpicture. In this case, only theimgtag is stripped. Thepictureanddivtags remain and works as expected.