MR9
Yahoo No Longer Supports display:none;
So I've just been testing some code in yahoo mail and it appears to be stripping display:none; I had a look at some working tests I sent yesterday and they're broken now too.
Not fun.
Not too big of an issue, you can still use the Gmail trick max-height:0px;overflow:hidden; on a block element to hide things.
The yahoo mail app still apears to be respecting display:none; and I updated that a few days ago, but I wouldn't be supprised if they dropped support on the next update.
Let me know if you spot anyother changes.
I tried using
visibility:hidden;position:absolute- Yahoo mail still strips theposition:absolutewhich still is not ideal.Is the litmus discussion section bugging out. Marks post says 5 mins ago and all the replies are from years and years ago?
Hi Nicolas, good spot! We're trying to get this bug addressed as soon as possible. There was an update/reply to the discussion more recently, but it's one of our older discussions.
I would like also report that almost all discussions after the "load more" section link back to the discussion overview page and not to the discussion it self
like try to open this one: UI Bug Litmus
you cant even open it from google search, internet explorer and firefox same thing so maybe its a web based issue and a web dev should take a look on it
Thanks Jaina,
Seems like I got downvoted for asking a question too :P
Yikes! Apparently display: none is still not stripped in the style block though. I just checked and yes, they're now stripping it in the inline styles.
They might strip it in the style block also on the next update and that would suck.
visibility: hidden; ftw!
Nice!
To anybody who happens to stumble upon this post: I just tested (2017301) this and it works.
Hi All,
I am using the show/hide hack where the email changes to mobile version when viewed in mobile and displays the desktop version when viewed in desktop. This hack works everywhere but the yahoo mail app. I have tried all the tips provided in the community forum to no avail. I am on tight deadline and literally pulling my hair out. Any guidance you can provide will be greatly appreciated.
Media query is
The table is wrapped in a div
<div class="show" style="font-size: 0; max-height: 0; overflow: hidden; display: none; mso-hide:all">PLEASE HELP!!
Thank you
A few options for you:
Add
.show{display:none;}outside of your media query. Yahoo strips this inline but is ok when it's in a<style>block.Can you add the code for the media query too? It could be that Yahoo is striping parts of that, then it's rendering on Yahoo mail.
If you open the email in yahoo, right click and inspect you can see exactly what styles are being applied and striped and where that's coming from.
Cheers,
Mark
Is anyone else here finding the opposite is true now for
displaysupport with Yahoo? I'm finding thatdisplay: none;works in both Yahoo! webmail and iOS/Android apps when I'm hiding some mobile-specific copy, however when I show it on mobile,display: block;,display: inline;anddisplay: inline-block;all do not work in the iOS/Android apps.I am also having the same issue, though in addition to block and inline, display:none; still doesn't work either. I had to add visibility: hidden;
Hmm could be the other code I used for Gmail that made it look like
display: none;worked. I can see now inspecting in Yahoo! Mail thatdisplay: none;is not listed. However, when I usedisplay: none;I can't override it for the Yahoo App in the media query. If I don't usedisplay: none;, then I can get mobile-specific copy to appear by overriding the other code (font-size: 0;etc for Gmail). Butdisplay: none;seems to be needed for Outlook, as it doesn't listen nicely tofont-size: 0;etc like other email clients, still taking up space. :/The thing with
visibilityis that the element still takes up physical space (unlike withdisplay), which can be an issue depending on what you're trying to hide/show and where.Courney, I'm able to hide content in YMail webmail and show in YMail iOS app by doing this:
This doesn't work for me on Y webmail or iOS app. In fact, none of my display properties in a media query are being understood anymore--whether it's
display:none;ordisplay: block !important;Are you testing from an ESP or through Putsmail? A lot of ESPs automatically inline the styles which would defeat the non-inlined
display:nonestyle. Yahoo! Mail requiresdisplay:noneto be non-inlined - don't know what's their deal on that.I'm using Putsmail
Perhaps you could post a snippet here?
You could take it a step further if you just wanted to target Yahoo! Mail with the following media query -
@media yahoo { .. }Here's code if it helps.
display: none;is inlined in the HTML, but if Yahoo ignores it then shouldn't the mobile-specific copy appear in the Yahoo app? Because usingdisplay: block;,display: inline-block;ordisplay: inline;all do NOT override it and it doesn't show in the Yahoo app. If I do not usedisplay: none;then the other CSS works for hiding/showing properly with Yahoo, but it causes issues with older versions of Outlook (copy is tiny, taking up space).In the HTML:
In the media query:
The desktop version of the "view as a webpage" copy I am hiding on mobile only using a class with
display: none;in the media query and it works in the Yahoo app...Yahoo! really needs to get their act together. So here's what I've found.
1)
display:noneis supported inline in the app but not webmail2) App and Webmail strips
!importantfrom any display styles3) That's why you can't override
display:noneinline statements in the media query in mobile.So I've found this works:
Haha wow crazy!! Thanks Justin!
I found I had to use max-width:0px; too.
Good find Mark. Thanks for sharing.
Thank you for sharing. I tested your Gmail trick and it does work where display none does not. We'll have to go over our templates and make sure things are good on our end. Thanks again!
I am not having luck with any of the workarounds
Any other suggestions?
Just did some tests on several Yahoo and Gmail desktop clients. Display:none; is being stripped on inline code.
I'm not sure when it happened, but as of March 4 2015 the Yahoo Mail app on Android doesn't listen to
display:none;in a media query to hide desktop images on mobile. The Gmail trick does work around this.Just to confirm, is this all android versions? or?
Cheers
You can also use font size: 0 that way u have the same functionalety, depending on your template u may also have to ad line- height: 0 with all the mso "fix"