Минимизация разрыва приложения Почта iOS в CSS-анимации

Question

Редактировать: теперь я уверен, что это связано со свойством z-index для стрелок. Если z-индекс левой стрелки выше, чем правая стрелка, изображение левой стрелки будет вставлено справа. Если z-индекс правой стрелки выше или равен левой стрелке, правая стрелка будет вставлена ​​справа. Я до сих пор не знаю, почему это происходит и почему он не просто помещает изображения туда, куда я говорю.

Оригинал:

Я создаю электронное письмо с каруселью изображений, которая должна скользить взад и вперед, когда пользователь нажимает на стрелки в сторону или вкладки внизу. Но я вижу странное поведение в родном почтовом приложении iOS, и это сводит меня с ума. Когда я впервые получаю и открываю письмо, все работает так, как должно. Но если я заблокирую свой телефон или даже просто сверну приложение Mail и снова открою его, стрелки начнут ломаться.

Я вставляю стрелки со свойством content (url) в псевдоэлемент :: after. Наиболее распространенной ошибкой является стрелка, указывающая вправо, которая отображается слева, когда отображаются все, кроме первого кадра. Но иногда это первый кадр с неправильной стрелкой, и как только я перехожу на другой кадр, возвращается правильный. Я также вижу, как мигает стрелка влево, прежде чем заменить стрелку вправо. Иногда верхняя половина стрелки правильная, а нижняя половина неправильная. Это все очень сложно определить и очень разочаровывает.

Я видел рекомендации добавить -webkit-backface-visibility: hidden; (что не сработало) и -webkit-perspective: 1000; (что нарушает мое абсолютное позиционирование по стрелкам) и -webkit-transform: translateZ(0); (что также нарушает мое абсолютное позиционирование) к родителю.

Вот изображение того, что я вижу в своем приложении: https://i.imgur.com/OjoTIk9.gifv

Вот мой полный HTML и 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 -->
            <a href="#" target="_blank"><img class="full-width autoHeight" src="https://i.imgur.com/j4HpeVl.png" style="display:block;" alt="" border="0"></a>
            <!-- Slide 2 Main Image -->
            <a href="#" target="_blank"><img class="full-width autoHeight" src="https://i.imgur.com/7OdQqhV.png" style="display:block;" alt="" border="0"></a>
            <!-- Slide 3 Main Image -->
            <a href="#" target="_blank"><img class="full-width autoHeight" src="https://i.imgur.com/g9pLZbr.png" style="display:block;" alt="" border="0"></a>
            <!-- Slide 4 Main Image -->
            <a href="#" target="_blank"><img class="full-width autoHeight" src="https://i.imgur.com/ewrZxr5.png" style="display:block;" alt="" border="0"></a>
          </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

Я исправил это, внеся следующие изменения в CSS:

.carousel .car-rtn {
      z-index: 200;
      width: 10%;
}

И я также избавился от тени на классе .carousel .car-ltn::after.

Answer 2

z-index не работает с большинством почтовых клиентов.E:after не работает с большинством почтовых клиентов.webkit-animation будет работать только с 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/

Удачи.