Visibility Classes not being respected in Outlook for Android (Need Work Around)

[lukeoregan88]

So I'm not sure if this topic has been discussed.

I have seen others raise issues with the Visibility Class on Outlook but those seem to be implemented in the latest development branch for 'foundation-emails'

I'm following the tutorial on the webpage https://get.foundation/emails/docs/visibility.html but the visibility class doesn't seem to work when viewing on Outlook for Andriod 12.0

I've been doing Litmus tests and every attempt I do just doesn't work. It should be showing and hiding the callout example in the tutorial above but every time (on this email client only!) it always shows both at the same time!

It could just be a simple CSS fix but I can't seem to figure it out. I'm guessing it's got something to do with @media CSS query but according to the web it should be fully supported. Any Support or anyone who's had experience with this would be appreciated.

How can we reproduce this bug?

1. Create a new project and insert the inky code as instructed on this tutorial page https://get.foundation/emails/docs/visibility.html

2. Test on Litmus using Outlook for Andriod. If you have an Andriod install Outlook and try. Do not use Android Studio and emulate the device. The Studio app is misleading and doesn't show the real problem on actual physical devices.

What did you expect to happen?

I expected the correct callouts to be displayed ('This callout will only appear on small screens.')

What happened instead?

I'm seeing both callouts being displayed ('This callout will only appear on small screens.' & 'This callout will only appear on large screens.')

What email clients does this happen in?

Outlook for Andriod (Andriod V 12 - But any version has the same results)

[viking1304]

I am unsure if you figured out this yet since this is a very old question, but there is a very simple and extremely stupid workaround.

Just reformat (decompress) the HTML code after compilation. Believe it or not, that's all! 😱😱😱

When you visually compare the email that uses compressed code with the one which uses uncompressed code in mobile Outlook, you will notice that they are very different.

The compressed version has much smaller text and images, meaning it has a larger viewport than the uncompressed version. That is probably the cause of your problem. I guess it doesn't trigger the CSS part that hides the desktop callout since the viewport size is probably bigger than the breakpoint specified in CSS.

I didn't have time to test what is the actual cause of this problem, but at least it works as expected after reformatting.