Я создал электронное письмо в формате HTML с интерактивным элементом, который имеет функцию вкладки для определенных клиентов при доступе через собственное почтовое приложение iOS, встроенное в iOS для iPhone / iPad, однако у меня возникают проблемы с отображением контента.
Я использовал флажки для достижения функциональности вкладок в сочетании с CSS-анимацией.
https://bestclownintown.co.uk/news/GT_cats.html
У меня есть простой медиа-запрос для отображения устройств отображения Apple / Retina в HTML, который должен обеспечить интерактивное отображение контента, а не отступление:
@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;}
}
Странная проблема возникает в контейнере .interactive <div>, где отображаются отдельные кнопки для навигации по вкладкам. Тем не менее, содержимое от .tab1 до .tab6 не отображается, и я не понимаю, почему это происходит.
Протестировано на iPad mini 2 под управлением iOS 12.1 в собственном приложении Mail
