The loading icon appears stuck and does not rotate on iOS version 15.3 and above, but functions properly on versions below 15.3

The loading icon does not spin on iOS versions > 15.3 or 16.1, but it works perfectly fine on lower iOS versions for iPhone and iPad, as well as on Android browsers.

Below is the CSS code for reference. I've attempted using webkit for Safari and also tried with transform: rotate(-360deg), but the spinner only fails to spin/rotate on iOS devices. Could you please suggest any changes we can make from our end to fix this issue?

 @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    
      // More CSS code...
      

Answer №1

Refer to the HTML and JavaScript code below for guidance on animation effects. The text describes the fade-out animation using CSS3 defined with a delay. Although attempted, this approach did not yield the desired results.

<div id="Wrapper" class="Wrapperspinner" 
         aria-label="Loading page now">
      <div class="loading">
        <!-- Make this div spin -->
        <div class="spinner">
          <!-- Mask of the quarter 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 server...
          </div>
          <div class="boi_label SpinnerStep2">
            Authenticating 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the dimensions of the MaterialUI Switch component manually

Struggling to resize a Material-UI Switch as the default size isn't suitable. Managed to increase the size, but now the behavior isn't ideal. It looks fine in its default state: However, when changing its state, it loses style: Unable to figu ...

Creating a div that automatically scrolls along with the page as it reaches the edges of the viewport

My website features a floating box on the side of the page (Parent div) housing a child div with a position:sticky property that scrolls along with the page as it reaches the top of the viewport. See it in action here: https://codepen.io/Xanthippus480/pen/ ...

Caution: React is unable to identify the `PaperComponent` prop on a DOM element

Trying to create a draggable modal using Material UI's 'Modal' component. I want users to be able to move the modal around by dragging it, so I decided to use 'Draggable' from react-draggable library. However, I encountered this er ...

A guide to implementing lazy loading using BXSlider

I have implemented an image gallery using Bxslider, but I am facing an issue with the loading time as there are more than 15 images in each slide. To address this problem, I want to load images one by one when a particular slide appears. I came across an e ...

The jQuery function for $(window).scroll is not functioning as expected

My challenge is getting the scroll to reveal my scrollTop value I've been working with this code: $(document).ready(function(){ console.log('Hello!'); $(window).scroll(function(){ console.log('Scrolling...'); var wScroll = ...

What is the best way to align an element next to another using id or class?

I am looking to align the search element next to either "Media Heading 1" or "Media Heading 2" based on their id/class. For instance: Assume I have an element with the class of "media-item-1" and I aim to position the search div alongside that element us ...

Creating an animated CSS growth effect using inline SVG

I'm trying to make these circuits look like they are running downwards. I have the right movement, but I can't seem to start them at their actual size, causing them to appear skewed at the beginning of the animation and then scaling to full size ...

Is it possible to apply a CSS transform without erasing the existing transform?

Looking for a solution: elem transform translateY(5px) scale(1.2) I want the element to move down an extra 5px on hover elem:hover transform translateY(5px) Is there a way to achieve this without knowing the previous state of the transform? Appr ...

What is the best method for developing a draggable element that remains stable?

I have developed a simple script for draggable elements, however, I am facing an issue. Whenever I move the mouse quickly, the element loses focus. Is there a way to improve the stability of the dragging functionality regardless of how fast I move the mou ...

How can I use jQuery to transform a div with its elements into a canvas?

Looking for a way to convert a HTML Div and its elements to canvas, and then the canvas to an image using Jquery. I've checked out a website that only converts the whole HTML page, but I need a solution for converting specific Div elements. Any help w ...

What could be the reason behind the malfunctioning of my media query in the

I am trying to connect an external stylesheet to my React component in order to apply different styles based on screen width. Specifically, when the screen width is less than 300px, I want the logo to have a height of 100vh. However, it seems that the medi ...

Connecting two fields with a line on click in AngularJS

In the top section, there are 10 fields and in the bottom section, there are another 10 fields. I want to be able to connect two fields with a line when they are clicked (one from the top section and one from the bottom section). This connection should app ...

Prevent sticky div from overlapping with footer

I currently have a social link menu that is fixed to the left side of my page, structured like this: <footer id="colophon"></footer> <div> <nav> <ul id="social"> <li>Link1</li> ...

What is the best way to insert an image between two sections using CSS?

As I work on a new webpage, I find myself stuck (yes, I'm a beginner :-) ). I have a header followed by a section, and I would like to place images in between the two. However, despite my attempts to position the images, they keep getting hidden "und ...

Website layout looking unique due to pixel width adaptation from standard width

I'm currently working on a website with full width design. On my computer, the website displays as full width, but on other computers it shows extra space on the sides. How can I ensure that this website is truly full width? .wrapper_boxed { wid ...

Jekyll is not beginning line numbers from the first line as they should be

My website was put together using Jekyll, specifically with the Beatiful-Jekyll theme. To make syntax highlighting possible, I utilized Rouge. The issue arises when displaying line numbers alongside the code - sometimes they don't align properly or ar ...

A tag that does not adhere to the background color's rgba opacity restrictions

Can you believe what's happening to me? Check out this code snippet. I'm trying to apply an rgba color to my a tag, but it's acting like an rgb color instead of the intended rgba. The text background is solid, but the rest of the background ...

How to Make a Div Tag Fade Effect with JavaScript in an External File

*** New Team Member Notice *** I'm currently working on an assignment and trying to implement a simple fade effect on a box. While it seems like this should be straightforward, I'm encountering some obstacles. Currently, the button causes the bo ...

There seems to be an issue with the functionality of the JavaScript Quiz as it is

While working on my JS quiz, I encountered an issue where some answers were not displaying due to quotes and the need to escape HTML characters. Additionally, I am facing difficulty in accurately awarding points or deductions based on user responses. Curre ...

Tips for creating a sub-menu within a dropdown menu

I need some help adding a sub-menu to my drop-down function. I'm not very familiar with CSS, so I'm struggling to figure out how to do it. Ideally, I want the sub-menu to open to the right when the cursor hovers over it. Below is the CSS and HTML ...