html - 最小化 iOS 邮件应用程序会破坏 CSS 动画中的 z-index

标签 html ios css css-animations html-email

编辑:我现在确信这与箭头的 z-index 属性有关。如果左箭头的 z-index 高于右箭头，则左箭头图像将插入右侧。如果右箭头的z-index高于或等于左箭头，则右箭头会插在右边。我仍然不知道为什么会这样，也不知道为什么它不把图像放在我告诉它的地方。

原文:

我正在创建一个带有图像轮播的电子邮件，当用户点击两侧的箭头或底部的标签时，这些图像应该来回滑动。但我在 iOS native 邮件应用程序中看到了一些奇怪的行为，这让我抓狂。当我第一次收到并打开电子邮件时，一切都按预期进行。但是，如果我锁定我的手机，甚至只是最小化邮件应用程序并重新打开它，箭头就会开始断裂。

我在::after 伪元素上插入带有 content(url) 属性的箭头。最常见的错误是当除第一帧外的所有帧都显示时，向右箭头出现在左侧。但有时是第一帧有错误的箭头，当我换到另一帧时，正确的又回来了。我还可以看到左箭头在被右箭头取代之前闪烁。有时箭头的上半部分是正确的而下半部分是错误的。这一切都很难确定并且非常令人沮丧。

我看到了添加 -webkit-backface-visibility: hidden; (没有用)和 -webkit-perspective: 1000; (打破了我在箭头上的绝对定位)和 -webkit-transform: translateZ(0); (这也打破了我的绝对定位)到父级。

这是我在我的应用程序中看到的 gif: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>

最佳答案

z-index 不适用于大多数电子邮件客户端。 E:after 不适用于大多数电子邮件客户端。 webkit-animation 仅适用于 IOS、Apple 邮件。

祝你好运。

关于html - 最小化 iOS 邮件应用程序会破坏 CSS 动画中的 z-index，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55927623/

上一篇：css - IE 和 Edge 的高对比度下划线问题

下一篇：javascript - 将选项卡更改为 Accordion - 单击时 Accordion 菜单不会折叠

相关文章：

ios - 当应用程序未处于运行状态(非事件状态)时下载所有推送通知

javascript - 将相同高度的 div 应用于另一个 div，并在调整大小时进行填充

html - 我应该使用 'li' 还是 'article' 来列出产品？

javascript - 在 JavaScript 中使用来自 JSON 的数据动态填充表的快速方法

html - 解释为什么这个元素不呈现在前面

android - 如何在 Cordova 应用程序开发工作流程中使用特定于平台的插件？

html - 如何删除 HTML 标题上方的空格(边距)？

ios - 如何在 ios 中使用子类更改 UITextfield 占位符文本颜色

html - 无法将 css 与 IE 链接，适用于 chrome

css - 按钮(引导按钮)的颜色在 netbeans 中没有改变？

©2024 IT工具网  联系我们