Facing loader issue in IOS version 16.3.1

We are facing an issue in IOS version 16.3.1

where the animation based loader is not getting visible, but .svg based loader is working fine and

the same animation based loader is working fine in android and windows, and all the remaining versions of IOS as well

The html code :

<div class="showbox overlayhideclass" id="overlayhideapple" style="display:none;opacity:2.9;">

<div class="loader">

<svg class="circular darkLoader" style="display:none;" viewBox="25 25 50 50">

<!-- Background ring -->

<circle class="background-ring" cx="50" cy="50" r="22"></circle>

<!-- Loading circle -->

<circle class="path" cx="50" cy="50" r="22" fill="none" stroke-width="6" stroke-miterlimit="10"></circle>

</svg>

<svg class="circular lightLoader" style="" viewBox="25 25 50 50">

<!-- Background ring -->

<circle class="background-ring" cx="50" cy="50" r="22"></circle>

<!-- Loading circle -->

<circle class="path" cx="50" cy="50" r="22" fill="none" stroke-width="6" stroke-miterlimit="10"></circle>

</svg>

</div>

</div>



	classes:



.loader {

  position: relative;

  margin: 0 auto;

  width: 100px;

&:before {

    content: "";

    display: block;

    padding-top: 100%;

  }

}

 

.circular {

  animation: rotate 1s linear infinite;

  height: 100%;

  transform-origin: center center;

  width: 74.84%;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  margin: auto;

  border-radius: 50%;

}

 

.background-ring {

  fill: none;

  stroke: rgb(227, 226, 231);

  stroke-width: 6;

}

 

.path {

  stroke-dasharray: 1, 200;

  stroke-dashoffset: 0;

  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;

  stroke-linecap: round;

}

 

@keyframes rotate {

  100% {

    transform: rotate(360deg);

    -webkit-transform: rotate(360deg);

  }

}

 

@keyframes dash {

0% {

    stroke-dasharray: 100, 200;

    stroke-dashoffset: -100px;

  }

  30% {

    stroke-dasharray: 100, 200;

    stroke-dashoffset: -100px;

  }

  100% {

    stroke-dasharray: 100, 200;

    stroke-dashoffset: -100px;

  }

}

 

@keyframes color {

  100%,

  0% {

     stroke:var(--loader-icon);

  }

  40% {

     stroke:var(--loader-icon);

  }

  66% {

     stroke:var(--loader-icon);

  }

  80%,

  90% {

     stroke:var(--loader-icon);

  }

}

 

body {

  background-color: var(--white);

}

.showbox {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  width: 100vw;

  height: 100vh;

  display: flex;

  align-items: center;

}

.overlayhideclass {

 

  

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    text-align: center;

    opacity: 2.9;

    background-color: Var(--pg-bg-primary);

    z-index: 9999;

    display: flex;

    justify-content: center;

    justify-items: center;

    justify-self: center;

    overflow:-y:hidden;

}

 

.darkLoader {

    z-index: 100;

    display: flex;

    justify-content: center;

    align-items: center;

}

.lightLoader{

    z-index: 100;

    display: flex;

    justify-content: center;

    align-items: center;

}

Unfortunately we cannot diagnose the problem from the snippet above; it seems to be incomplete, and have errors (e.g. all the content is inside an element with style="display:none; opacity:2.9;" and the CSS is malformed at "&:before {",

Please provide a link to a page where the problem occurs.

Facing loader issue in IOS version 16.3.1
 
 
Q