Nrthugu

I've created an HTML email with an interactive element which has tabbing functionality for certain clients when accessed via the iOS native mail app built into iOS for iPhones/iPads, however, I seem to be encountering issues with content not displaying.

I have used checkboxes to achieve the tabbing functionality coupled with CSS animations.

https://bestclownintown.co.uk/news/GT_cats.html

I have a simple media query to target Apple/Retina display devices within the HTML which should make the interactive content display rather than the fallback:

@media screen and (-webkit-min-device-pixel-ratio:0) {

.fallback {display:none;display:none!important;max-height:0;overflow:hidden;}

.interactive {display:block!important;max-height:none!important;background-color:red;}

}

A strange issue is occurring inside the .interactive container <div> where the individual buttons are rendering to navigate the tabs. However, the content contained within the .tab1 through to .tab6 is not displayed and I don't understand why this is occurring.

Tested on iPad mini 2 running iOS 12.1 on the native Mail app