When creating interactive emails, you may have noticed that the email sometimes misbehaves or renders oddly in Yahoo! Mail or AOL Mail when viewed in Internet Explorer (IE). The reason for this is that IE has a very peculiar bug that causes mobile media queries using max-width to be enabled where radio buttons are present. By the way, IE also has another issue with images within labels.

This article will go into the details of the radio input bug and how you can work around it.

Radio Input Bug

In Yahoo! Mail and AOL Mail, any media query using max-width – regardless of width – will become active if a selector within the media query references an element that wraps a checked radio input. Yup, super wierd!

This means if you have a large CSS block in your media query for your mobile layout and one selector happens to reference an element containing a checked radio input, Yahoo! Mail in IE will display your mobile layout. However if the user resizes the browser even slightly, the media query will revert to its original state.

Here’s an example:

<style>
.foo{
   background-color: blue;
}
@media (max-width:480px) {
  .foo{
    background-color:yellow;
  }
}
</style>
<div class="foo">
  <input type=radio checked>
</div>

In the above example, when the email is opened in Yahoo! Mail in Chrome on a browser that is more than 480px wide, the “foo” div will be displayed with a blue background. But when it is viewed in IE 10 or 11, the div will have a yellow background. Then if you resize the browser, the background will revert to blue.

The really strange part is that if the input element is anything else other than a radio input, such as a checkbox, this issue doesn’t occur. Also if the radio input is not checked, the issue doesn’t occur as well. On top of that, if you have a separate media query in your style block with the same filters but without a selector that references an element wrapping a checked radio input, that media query won’t become enabled.

In short, if you have multiple media queries in your email, only the ones with selectors that references elements that wrap a checked radio input becomes enabled.

Javascript Replacement Bug

The really odd thing is that this is not a bug with the default Internet Explorer HTML rendering. The bug only manifests when HTML is copied using Javascript into a container – which is what Yahoo! Mail and AOL does when you open an email. Email content is asynchronously loaded and populated into a div container within the email interface.

If the content containing the media query is merely loaded as a web-page, this bug does not happen. Surprisingly this issue does not manifest in Gmail even though it supports radio elements and media queries. This issue does not affect Outlook.com because that client strips out input elements.

If you are on a Windows computer, you can test this out for yourself with this Codepen.

Possible Workarounds

Use max-device-width

The simplest workaround is to use max-device-width instead of max-width in your media query filters when incorporating interactive content in your email. This comes with a small downside, since the Yahoo! Mail app does not support max-device-width your email will not be responsive when viewed in that app.

Add min-width

Another workaround suggested by Mohammed Shameer is to add min-width to your max-width media query. However, since the Yahoo! Mail app only supports media queries with a single filter your email will not be responsive when viewed in that app.

@media (max-width:480px) and (min-width:1px) {...}

Checked radio elements outside media queries

You can also avoid this but by putting checked radio inputs outside elements referenced by max-width media queries. This is more complicated but only requires that checked radio inputs be moved out, unchecked radio elements as well as checked and unchecked checkboxes can be left inside.

Use multiple media queries

If your interactive content only needs to be displayed in say iOS, you can use the max-device-width (or other media queries such as -webkit-device-pixel-ratio) for your interactive content and continue to use max-width for other content as long as the max-width media queries do not reference elements that contain a checked radio element.

Ideas?

If you manage to find a solution that doesn’t require the tradeoffs with the presented workarounds, please do let us know in the comments!

Don’t Guess, Test!

At Email on Acid, testing is at the core of our mission. After you’ve finished setting up the perfect design for your campaign, ensure the email looks fantastic in EVERY inbox. Because every client renders your HTML differently, it’s critical to test your email across the most popular clients and devices.

Try us free for 7 days and get unlimited access to email, image and spam testing to ensure you get delivered and look good doing it!

TEST TODAY!

Original Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.