iOS版本15.3中加载图标不旋转

siv3szwd  于 2023-02-10  发布在  iOS
关注(0)|答案(1)|浏览(110)

加载图标在iOS版本〉15.3或16.1中不旋转,但在较低的〈15 iOS版本iPhone和iPad和Android浏览器中工作正常。
请找到下面的css代码作为参考。我已经尝试了webkit的safari,也尝试了转换:旋转(-360deg)。但是spinner不能单独在iOS设备中旋转。请确认我们可以从我们这端进行哪些更改。

@keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    
      @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
      }
      
      /* spinner Wrapper */
      .Wrapperspinner{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9999;
        line-height: 30px;
        margin-left: 0;
        margin-top: 0;
        text-align: center;
        color: #fff;
        padding-top: 7px;
        background-color: rgba(250, 250, 250, 0.8);
        opacity: 0.8;   
        display: none;
      }
        
      .loading {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80px;
        height: 110px;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%)
      }
    
      /* Spinning circle (inner circle) */
      .loading .maskedCircle {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 3px solid #ff6969;
      }
    
      /* Spinning circle mask */
      .loading .mask {
        width: 25px;
        height: 25px;
        overflow: hidden;
        margin: -3px;
      }
    
      /*waiting text*/
      .loading .spinnerWaitingText {
        position: absolute;
        bottom: 0;
        text-align: center;
        width: 100%;
      }
    
      /* Spinner */
      .loading .spinner {
        position: absolute;
        left: 0;
        top: 0;
        width: 80px;
        height: 80px;
        animation-name: spin;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        -webkit-animation-name: spin;
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;  
        border-radius: 50%;
        border: 3px solid #12779a;
      }
    
      div.tc-screenMask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background-color: #000;
        opacity: 0.3;
        display: none;
      }
      .SpinnerStep1,
      .SpinnerStep2,
      .SpinnerStep3{
        opacity: 0;
        text-align: center;
        position: absolute;
        width: 100%;
      }
    
      .SpinnerContainer{
        position: fixed;
        top: calc(50% + 90px);
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        min-width: 300px;
        visibility: hidden;
      }
    
      .SpinnerStep1 {
        animation-name: fadeInOut1;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: 1;
        -webkit-animation-name: fadeInOut1;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;
      }
      .SpinnerStep2 {
        animation-name: fadeInOut2;
        animation-duration: 6s;
        animation-timing-function: linear;
        animation-iteration-count: 1;
        -webkit-animation-name: fadeInOut2;
        -webkit-animation-duration: 6s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;           
      }
      .SpinnerStep3 {
        animation-name: fadeInOut3;
        animation-duration: 9s;
        animation-timing-function: linear;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        -webkit-animation-name: fadeInOut3;
        -webkit-animation-duration: 9s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-fill-mode: forwards;      
      }
    
      @keyframes fadeInOut1 {
        0% { opacity: 0 }
        1% { opacity: 1 }
        95% {opacity: 1 } 
        100% { opacity: 0 } 
      }
    
      @keyframes fadeInOut2 {
        0% { opacity: 0 }
        50% { opacity: 0 }
        51% { opacity : 1} 
        95% { opacity: 1 } 
        100% { opacity: 0 } 
      }
    
      @keyframes fadeInOut3 {
        0% { opacity: 0 } 
        66% { opacity: 0 }
        67% { opacity: 1 }  
        100% { opacity: 1 } 
      }
    
      @-webkit-keyframes fadeInOut1 {
        0% { -webkit-opacity: 0 }
        1% { -webkit-opacity: 1 }
        95% {-webkit-opacity: 1 } 
        100% { -webkit-opacity: 0 } 
      }
    
      @-webkit-keyframes fadeInOut2 {
        0% { -webkit-opacity: 0 }
        50% { -webkit-opacity: 0 }
        51% { -webkit-opacity : 1} 
        95% { -webkit-opacity: 1 } 
        100% { -webkit-opacity: 0 } 
      }
    
      @-webkit-keyframes fadeInOut3 {
        0% { -webkit-opacity: 0 } 
        66% { -webkit-opacity: 0 }
        67% { -webkit-opacity: 1 }  
        100% { -webkit-opacity: 1 } 
      }
    
      .angSpinner.Wrapperspinner {
        background-color: #fff;
        opacity: 0.9;
        display: block;
        visibility: hidden;
      }
      .angSpinner .loading {
        width: 148px;
        height: 148px;
      }
      .angSpinner .loading .spinner {
        border: none;
        width: 148px;
        height: 148px;
        animation-name: spin;
        animation-duration: .8s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        -webkit-animation-name: spin;
        -webkit-animation-duration: .8s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;  
      }
      .angSpinner .loading .maskedCircle {
        border: 4px solid #005900;
        width: 140px;
        height: 140px;
        margin: 0;
        box-sizing: content-box;
        -webkit-box-sizing: content-box;
      }
      .angSpinner .loading .mask {
        width: 148px;
        height: 35px;
        margin: 0;
      }
b4qexyjb

b4qexyjb1#

作为第一步,尝试将以下代码行添加到.loading类中,以确保在微调器上启用了3D变换。

-webkit-backface-visibility: hidden;

这个问题也有可能与最新的iOS版本有关,该版本对CSS动画有不同的行为和支持。您可以尝试使用不同的方法,例如使用类似Animate.css的CSS库或类似Spin.js的JavaScript库。

相关问题