最小化iOS Mail應用程序會破壞CSS動畫中的z-index

Question

編輯：我現在確信這與箭頭的z-index屬性有關。 如果左箭頭的z-index高於右箭頭，則左箭頭圖像將插入右側。 如果右箭頭的z-index高於或等於左箭頭，則右箭頭將插入右側。 我仍然不知道為什么會發生這種情況以及為什么它不會把圖像放在我告訴它的地方。

原版的：

我正在創建一個帶有旋轉圖像的電子郵件，當用戶點擊箭頭到底部的側面或標簽時，這些圖像應該來回滑動。 但我在iOS本機郵件應用程序中看到一些奇怪的行為，這讓我發瘋。 當我第一次收到並打開電子郵件時，一切都按照預期的方式運行。 但是如果我鎖定手機甚至只是最小化Mail應用程序並重新打開它，箭頭就會開始破碎。

我在:: after偽裝元素上插入帶有內容（url）屬性的箭頭。 最常見的錯誤是當除第一幀之外的所有幀都顯示時，右側箭頭顯示在左側。 但有時它是第一個有錯誤箭頭的框架，一旦我換到另一個框架，正確的框架就會回來。 我也可以看到左箭頭在被右箭頭替換之前閃爍。 有時箭頭的上半部分是正確的，下半部分是錯誤的。 這非常難以確定並非常令人沮喪。

我已經看到了建議添加-webkit-backface-visibility: hidden; （哪些不起作用）和-webkit-perspective: 1000; （這打破了我對箭頭的絕對定位）和-webkit-transform: translateZ(0); （這也打破了我的絕對定位）給父母。

這是我在我的應用程序中看到的gif的一個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> 

Answer 1

z-index不適用於大多數電子郵件客戶端。 E:after與大多數電子郵件客戶端不兼容。 webkit-animation只適用於IOS，Apple郵件。

• https://www.campaignmonitor.com/css/positioning-display/z-index/
• https://www.campaignmonitor.com/css/selectors/after/
• https://www.campaignmonitor.com/css/animations/animation/

祝好運。

Answer 2

我最后通過對CSS進行以下更改來修復它：

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

我也擺脫了.carousel .car-ltn::after課后的陰影。