Minimizing iOS Mail app breaks z-index in CSS animation - html

Question

Edit: I'm now confident that this is related to the z-index property of the arrows. If the z-index of the left arrow is higher than the right arrow, the left arrow image will be inserted on the right. If the z-index of the right arrow is higher or equal to the left arrow, the right arrow will be inserted on the right. I still have no idea why this is happening and why it won't just put the images where I tell it to.
Original:
I'm creating an email with a carousel of images that should slide back and forth when the user clicks on arrows to the sides or tabs at the bottom. But I'm seeing some strange behavior in the iOS native mail app and it's making me crazy. When I first receive and open the email, everything works the way it's supposed to. But if I lock my phone or even just minimize the Mail app and reopen it, the arrows will start breaking.
I insert the arrows with a content(url) property on an ::after psuedo-element. The most common error is the right-facing arrow showing up on the left side when all but the first frame is showing. But sometimes it's the first frame that has the wrong arrow and as soon as I change to another frame, the correct one comes back. I also can see the left arrow flickering in before being replaced by the right arrow. Sometimes the top half of the arrow is correct and the bottom half is wrong. It's all very hard to pin down and very frustrating.
I've seen recommendations to add -webkit-backface-visibility: hidden; (which didn't work) and -webkit-perspective: 1000; (which breaks my absolute positioning on the arrows) and -webkit-transform: translateZ(0); (which also breaks my absolute positioning) to the parent.
Here's a gif of what I'm seeing in my app: https://i.imgur.com/OjoTIk9.gifv
Here's my full HTML and CSS:
<style type="text/css">
table {border-spacing:0px !important;}
table, tr, td {width:100% !important;max-width:580px;}
.full-width {
width:100% !important;}
.autoHeight {
height:auto !important;
}
/*** Carousel CSS */
#media screen and (-webkit-min-device-pixel-ratio: 0) {
/* bugfix for Android 4.4 to support e ~ y */
body {
-webkit-animation: bugfix infinite 1s;
}
#-webkit-keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
#supports (position:relative) {
/*.container {
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
.container label {position: absolute !important; z-index: 5000 !important;}*/
/* Hide Fallback content first */
.fallback {
display: none;
}
.carousel {
display: block !important;
max-height: none !important;
position: relative;
}
div[class~="aolmail_carousel"] {
display: none !important;
}
div[class~="aolmail_fallback"] {
display: block !important;
max-height: none !important;
position: relative;
}
/*
Selective blocking for clients.
- Samsung (#MessageViewBody) - no absolute positioning
- Comcast/Zimbra (body.MsgBody) - inconsistent CSS support
*/
#MessageViewBody .fallback,
body.MsgBody .fallback {
display: block;
}
#MessageViewBody .carousel,
body.MsgBody .carousel {
display: none !important;
}
input {
display: none;
}
.carousel a {
width: 100%;
display: block;
overflow: hidden;
}
.carousel .car-frames img {
display: block!important;
width: 100% !important;
height: auto !important;
}
.carousel.responsive {
width: 100% !important;
}
.carousel.slide a {
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
width: 100%;
-webkit-animation: slide-anim 12s linear infinite;
}
.carousel.slide a:nth-child(1) {
position: relative;
-webkit-animation-delay: -13s;
}
.carousel.slide a:nth-child(2) {
-webkit-animation-delay: -10s;
}
.carousel.slide a:nth-child(3) {
-webkit-animation-delay: -7s;
}
.carousel.slide a:nth-child(4) {
-webkit-animation-delay: -4s;
}
/* iOS doesn't like negative delay with translates (transform:translateX(100%);) */
/* So we use margin although it is less "smooth" */
#-webkit-keyframes slide-anim {
/* start slide in */
0% {
margin-left: 100%;
}
/* end slide in */
5% {
margin-left: 0%;
}
/* start slide out */
25% {
margin-left: 0%;
}
/* end slide out */
30% {
margin-left: -100%;
}
/* start slide out */
75% {
margin-left: -100%;
}
/* end slide out */
80% {
margin-left: -200%;
}
100% {
margin-left: -200%;
}
/* end slide out */
}
.carousel.slide .car-radio:checked~.car-cont .car-frames {
position: relative;
left: 0px;
top: 0px;
width: 400% !important;
transition: left 1s;
}
.carousel.slide .car-radio2:checked~.car-cont .car-frames {
left: -100%;
}
.carousel.slide .car-radio3:checked~.car-cont .car-frames {
left: -200%;
}
.carousel.slide .car-radio4:checked~.car-cont .car-frames {
left: -300%;
}
.carousel.slide .car-radio:checked~.car-cont a {
width: 25%;
}
.carousel.slide .car-radio:checked~.car-cont a:nth-child(2) {
position: absolute;
left: 25%;
top: 0px;
}
.carousel.slide .car-radio:checked~.car-cont a:nth-child(3) {
position: absolute;
left: 50%;
top: 0px;
}
.carousel.slide .car-radio:checked~.car-cont a:nth-child(4) {
position: absolute;
left: 75%;
top: 0px;
}
/* Navigation arrows */
.carousel .car-ltn {
z-index: 100;
display: none;
width: 15%;
height: 100%;
position: absolute;
background-color: transparent;
top: 0px;
cursor: pointer;
}
.carousel .car-rtn {
z-index: 100;
display: none;
width: 15%;
height: 100%;
position: absolute;
background-color: transparent;
top: 0px;
cursor: pointer;
}
.car-ltn {
left: 0px;
}
.car-rtn {
right: 0px;
}
.carousel .car-ltn::after {
content: url(https://i.imgur.com/CD2FWkH.png) !important;
width: 0;
height: 0;
position: absolute;
top: 40%;
margin-top: -8px;
-webkit-filter: drop-shadow(1px 1.5px 1px rgba(0,0,0,0.4));
}
.carousel .car-rtn::after {
content: url(https://i.imgur.com/BEpuyhp.png) !important;
width: 0;
height: 0;
position: absolute;
top: 40%;
left: 10%;
margin-top: -8px;
-webkit-filter: drop-shadow(1px 1.5px 1px rgba(0,0,0,0.4));
}
.car-ltn::after {
border-right: 0px solid #ffffff;
left: 25%;
}
.car-rtn::after {
border-left: 0px solid #ffffff;
right: 25%;
}
.carousel #car-cbox-support:checked~.car-cont .car-nav-1 {
display: block;
}
.car-radio2:checked~.car-cont .car-controls .car-nav-2,
.car-radio3:checked~.car-cont .car-controls .car-nav-3,
.car-radio4:checked~.car-cont .car-controls .car-nav-4 {
display: block;
}
.carousel .car-radio:checked~.car-cont,
.carousel .car-radio:checked~.car-cont *,
.carousel .car-radio:checked~.car-thumbnails *,
.car-radio:checked~.car-thumbnails .car-thumb::after
{
-webkit-animation: none;
}
/* Thumbnails */
.car-thumbnails {
z-index: 200;
position:absolute !important;
display:block !important;
bottom:0px;
width:100%;
}
.carousel #car-cbox-support:checked~.car-thumbnails {
display: block !important;
text-align: center;
position: relative;
/*background-color: #473729;*/
}
.carousel .car-thumb {
width: 24%;
opacity: 1;
z-index: 100;
cursor: pointer;
display: inline-block;
margin: 0px;
background-color: rgba(255,255,255,0.5);
}
#-webkit-keyframes focus3-anim {
0% {
background-color: rgba(255,188,46,1);
}
25% {
background-color: rgba(255,255,255,0.5);
}
50% {
background-color: rgba(255,255,255,0.5);
}
75% {
background-color: rgba(255,255,255,0.5);
}
100% {
background-color: rgba(255,188,46,1);
}
}
/* to eliminate use of delay */
#-webkit-keyframes focus3-anim-2 {
0% {
background-color: rgba(255,255,255,0.5);
}
25% {
background-color: rgba(255,188,46,1);
}
50% {
background-color: rgba(255,255,255,0.5);
}
75% {
background-color: rgba(255,255,255,0.5);
}
100% {
background-color: rgba(255,255,255,0.5);
}
}
#-webkit-keyframes focus3-anim-3 {
0% {
background-color: rgba(255,255,255,0.5);
}
25% {
background-color: rgba(255,255,255,0.5);
}
50% {
background-color: rgba(255,188,46,1);
}
75% {
background-color: rgba(255,255,255,0.5);
}
100% {
background-color: rgba(255,255,255,0.5);
}
}
#-webkit-keyframes focus3-anim-4 {
0% {
background-color: rgba(255,255,255,0.5);
}
25% {
background-color: rgba(255,255,255,0.5);
}
50% {
background-color: rgba(255,255,255,0.5);
}
75% {
background-color: rgba(255,188,46,1);
}
100% {
background-color: rgba(255,255,255,0.5);
}
}
#media only screen and (max-width:580px) {
.carousel .car-thumb div span {
display:none !important;
}
.carousel .car-thumb div {
width:15px !important;
height:15px !important;
border-radius: 50%;
margin: auto !important;
}
.carousel .car-thumb {
background-color:transparent !important;
}
.carousel .car-thumbnails {
line-height:50px;
width:70%;
left:15%;
}
.car-thumb:nth-child(1) div {
-webkit-animation: focus3-anim 12s ease-in infinite;
}
.car-thumb:nth-child(2) div {
/*-webkit-animation: focus3-anim 15s linear 5s infinite;*/
-webkit-animation: focus3-anim-2 12s ease-in infinite;
}
.car-thumb:nth-child(3) div {
/*-webkit-animation: focus3-anim 15s linear 10s infinite;*/
-webkit-animation: focus3-anim-3 12s ease-in infinite;
}
.car-thumb:nth-child(4) div {
/*-webkit-animation: focus3-anim 15s linear 10s infinite;*/
-webkit-animation: focus3-anim-4 12s ease-in infinite;
}
.car-radio:checked~.car-thumbnails .car-thumb:nth-child(1) {
background-color: rgba(255,255,255,0.5);
}
.car-radio1:checked~.car-thumbnails .car-thumb:nth-child(1) div {
background-color: rgba(255,188,46,1);
}
.car-radio2:checked~.car-thumbnails .car-thumb:nth-child(2) div,
.car-radio3:checked~.car-thumbnails .car-thumb:nth-child(3) div,
.car-radio4:checked~.car-thumbnails .car-thumb:nth-child(4) div {
background-color: rgba(255,188,46,1);
}
}
#media only screen and (min-width:580px) {
.car-thumb-1 {margin-right:3px !important;}
.car-thumb-2 {margin-right:3px !important;}
.car-thumb-3 {margin-right:3px !important;}
.car-thumb:nth-child(1) {
-webkit-animation: focus3-anim 12s ease-in infinite;
}
.car-thumb:nth-child(2) {
/*-webkit-animation: focus3-anim 15s linear 5s infinite;*/
-webkit-animation: focus3-anim-2 12s ease-in infinite;
}
.car-thumb:nth-child(3) {
/*-webkit-animation: focus3-anim 15s linear 10s infinite;*/
-webkit-animation: focus3-anim-3 12s ease-in infinite;
}
.car-thumb:nth-child(4) {
/*-webkit-animation: focus3-anim 15s linear 10s infinite;*/
-webkit-animation: focus3-anim-4 12s ease-in infinite;
}
.car-radio:checked~.car-thumbnails .car-thumb:nth-child(1) {
background-color: rgba(255,255,255,0.5);
}
.car-radio1:checked~.car-thumbnails .car-thumb:nth-child(1) {
background-color: rgba(255,188,46,1);
}
.car-radio2:checked~.car-thumbnails .car-thumb:nth-child(2),
.car-radio3:checked~.car-thumbnails .car-thumb:nth-child(3),
.car-radio4:checked~.car-thumbnails .car-thumb:nth-child(4){
background-color: rgba(255,188,46,1);
}
}
#media only screen and (max-width: 580px) {
.carousel .car-thumb {
width: 15%;
opacity: 1;
z-index: 100;
cursor: pointer;
display: inline-block;
margin: 0px 0px;
}
.carousel .car-thumb div {
background-color:rgba(255,255,255,0.5);
}
}
/* .car-ltn, .car-rtn {
display:none !important;
} */
/* .car-thumbnails {
display:none !important;
}
.carousel .car-thumb {
display:none !important;
} */
}
}
</style>
<table align="center" bgcolor="#ffffff" valign="middle" width="580" margin="auto" cellpadding="0" cellspacing="0" style="width:580px;border-collapse:collapse;margin:auto;background-color:#ffffff;text-align:center;">
<tr>
<td>
<!-- animated carousel -->
<div class="carousel slide responsive" style="overflow:hidden;width:580px;" width="580">
<!--[if !mso]><!-- -->
<input id="car-cbox-support" type="checkbox" checked="" style="display:none!important">
<input name="car-radio" type="radio" id="car1-radio-1" class="car-radio car-radio1" style="display:none!important">
<input name="car-radio" type="radio" id="car1-radio-2" class="car-radio car-radio2" style="display:none!important">
<input name="car-radio" type="radio" id="car1-radio-3" class="car-radio car-radio3" style="display:none!important">
<input name="car-radio" type="radio" id="car1-radio-4" class="car-radio car-radio4" style="display:none!important">
<!--<![endif]-->
<div class="car-cont" style="position:relative;background-color:#ffffff;">
<div class="car-frames">
<!-- Slide 1 Main Image -->
<img class="full-width autoHeight" src="https://i.imgur.com/j4HpeVl.png" style="display:block;" alt="" border="0">
<!-- Slide 2 Main Image -->
<img class="full-width autoHeight" src="https://i.imgur.com/7OdQqhV.png" style="display:block;" alt="" border="0">
<!-- Slide 3 Main Image -->
<img class="full-width autoHeight" src="https://i.imgur.com/g9pLZbr.png" style="display:block;" alt="" border="0">
<!-- Slide 4 Main Image -->
<img class="full-width autoHeight" src="https://i.imgur.com/ewrZxr5.png" style="display:block;" alt="" border="0">
</div>
<div class="car-controls container">
<!--When slide 1 (car-nav-1) is showing, clicking the left arrow should transition to slide 4 (car1-radio-4) -->
<label for="car1-radio-4" class="car-ltn car-nav-1"></label>
<!--When slide 1 (car-nav-1) is showing, clicking the right arrow should transition to slide 2 (car1-radio-2) -->
<label for="car1-radio-2" class="car-rtn car-nav-1"></label>
<!--When slide 2 (car-nav-2) is showing, clicking the left arrow should transition to slide 1 (car1-radio-1) -->
<label for="car1-radio-1" class="car-ltn car-nav-2"></label>
<!--When slide 2 (car-nav-2) is showing, clicking the right arrow should transition to slide 3 (car1-radio-3) -->
<label for="car1-radio-3" class="car-rtn car-nav-2"></label>
<!--When slide 3 (car-nav-3) is showing, clicking the left arrow should transition to slide 2 (car1-radio-2) -->
<label for="car1-radio-2" class="car-ltn car-nav-3"></label>
<!--When slide 3 (car-nav-3) is showing, clicking the right arrow should transition to slide 4 (car1-radio-4) -->
<label for="car1-radio-4" class="car-rtn car-nav-3"></label>
<!--When slide 4 (car-nav-4) is showing, clicking the left arrow should transition to slide 3 (car1-radio-3) -->
<label for="car1-radio-3" class="car-ltn car-nav-4"></label>
<!--When slide 4 (car-nav-4) is showing, clicking the right arrow should transition to slide 1 (car1-radio-1) -->
<label for="car1-radio-1" class="car-rtn car-nav-4"></label>
</div>
</div>
<div class="car-thumbnails" style="display:none;">
<!-- Thumbnail 1 -->
<label for="car1-radio-1" class="car-thumb car-thumb-1"><div valign="middle" style="font-family:'Open Sans', Arial, Helvetica, sans-serif;font-size:20px;font-weight:700;vertical-align:middle;width:100%;height:auto;line-height:75px;color:#ffffff;margin:0px;"><span>red</span></div></label>
<!-- Thumbnail 2 -->
<label for="car1-radio-2" class="car-thumb car-thumb-2"><div valign="middle" style="font-family:'Open Sans', Arial, Helvetica, sans-serif;font-size:20px;font-weight:700;vertical-align:middle;width:100%;height:auto;line-height:75px;color:#ffffff;margin:0px;"><span>blue</span></div></label>
<!-- Thumbnail 3 -->
<label for="car1-radio-3" class="car-thumb car-thumb-3"><div valign="middle" style="font-family:'Open Sans', Arial, Helvetica, sans-serif;font-size:20px;font-weight:700;vertical-align:middle;width:100%;height:auto;line-height:75px;color:#ffffff;margin:0px;"><span>green</span></div></label>
<label for="car1-radio-4" class="car-thumb car-thumb-4"><div valign="middle" style="font-family:'Open Sans', Arial, Helvetica, sans-serif;font-size:20px;font-weight:700;vertical-align:middle;width:100%;height:auto;line-height:75px;color:#ffffff;margin:0px;"><span>yellow</span></div></label>
</div>
</div>
</td>
</tr>
</table>

Answer 1

z-index does not work with the majority of the email clients.
E:after does not work with the majority of email clients.
webkit-animation is only going to work with IOS, Apple mail.
https://www.campaignmonitor.com/css/positioning-display/z-index/
https://www.campaignmonitor.com/css/selectors/after/
https://www.campaignmonitor.com/css/animations/animation/
Good luck.

Answer 2

I ended up fixing it by making the following changes to the CSS:
.carousel .car-rtn {
z-index: 200;
width: 10%;
}
And I also got rid of the drop shadow on the .carousel .car-ltn::after class.