加载图标在iOS版本15.3 +中不旋转,但在较低的15.3版本中工作正常

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

加载图标在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;
      }
s8vozzvw

s8vozzvw1#

请找到下面的HTML和JS代码供参考。其他动画文本是为淡出在上述css3定义-延迟。css3代码分享以上供您参考。我已经尝试了上述方法,但很抱歉它是行不通的。

<div id="Wrapper" class="Wrapperspinner" 
         aria-label="Loading page now">
      <div class="loading">
        <!-- We make this div spin -->
        <div class="spinner">
          <!-- Mask of the quarter of circle -->
          <div class="mask">
            <!-- Inner masked circle -->
            <div class="maskedCircle"></div>
          </div>
        </div>
        
        <div class="loginSpinnerContainer" aria-hidden="true"  tabindex="-1">
          <div class="boi_label SpinnerStep1">
            Contacting to server...
          </div>
          <div class="boi_label SpinnerStep2">
            Authenticating your application...
          </div>
          <div class="boi_label SpinnerStep3">
            Running security checks...
          </div>
        </div>
        
        <div class="boi_label spinnerWaitingText" aria-hidden="true" tabindex="-1">please wait</div>
      </div>
     
    </div>
    
    
    <script type="text/javascript" charset="utf-8">
    //<![CDATA[
    SLoader.setup({
      id: 'WRAPPER',
      showMask: 'WRAPPER.CREATE_MASK',
      delay: '5'
    });
    
    $(document).ready(function() {
       SLoader.triggerHide();
       $('.main-form').attr('aria-hidden', 'false');
    });
    
    Hi.addHook('beforeSubmit', showSpinnerOnSubmit);
    Hi.addHook('beforeAjaxButtonActionService', showSpinnerForAjaxButton);
    Hi.addHook('postProcessResponse', SLoader.triggerHide);
    
    function showSpinnerOnSubmit(){
      $('#WRAPPER$').attr({'role': 'alert', 'aria-live': 'assertive'});
      $('.main-form').attr('aria-hidden', 'true');
      SLoader.triggerShow();
    }
    
    function showLoginSpinner(){
            $('.loginSpinnerContainer').css('visibility', 'visible'); 
            $('.spinnerWaitingText').hide();
            $('#WRAPPER$').addClass('customSpinner'); 
    }
    
    function showSpinnerForAjaxButton() {
        if(document.activeElement.classList.contains('showSpinner_ajaxbutton')) {
            SLoader.triggerShowAjax();
        }
    }
    //]]>
    </script>

相关问题