Hi,
We are facing an issue in our page , The same works fine in other operating systems like android and windows.
we are facing this issue only on IOS and MAC(safari browser alone ).
We have a loader with us ,which will be shown in 2 different phases in our page. The first time loader will be shown while page is being loaded, the second loader will be shown once the user clicks on pay button.
the first loader is not giving any issues for us .But the second loader is not loading completely as you can see in the attached not working image ,the blue circle is being displayed only a 5-10%. It should start from 0 and gradually should reach 100% and again a loop.
From the analysis we could see the loader rotates fine after clicking pay button ,but once after page is submitted the issue happens
document.paypage.submit(); (code attached below) // this is the form submission in our page // once the control reaches this line we could see the loader is not working fine.
the same scenario is checked in android ,but even after page submission the loader works fine, Only in IOS and mac we are facing issue in (safari in mac other browser works fine without any issue), (all browsers in iOS).
please direct us to solve the issue
Attached images of working and not working scenario
Not Working
Working
Code sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loader</title>
<style>
.loader {
position: relative;
margin: 0 auto;
width: 100px;
&:before {
content: "";
display: block;
padding-top: 100%;
}
}
.circular {
animation: rotate 3s linear infinite;
height: 100%;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.background-ring {
fill: none;
stroke: rgb(227, 226, 231);
stroke-width: 5;
}
.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);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
30% {
stroke-dasharray: 95, 200;
stroke-dashoffset: -30px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
@keyframes color {
100%,
0% {
stroke: rgb(14, 236, 218);
}
40% {
stroke: rgb(14, 236, 218);
}
66% {
stroke: rgb(14, 236, 218);
}
80%,
90% {
stroke: rgb(14, 236, 218);
}
}
body {
background-color: var(--white);
}
.showbox {
display: flex;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 5%;
}
</style>
</head>
<body>
<div class="showbox">
<div class="loader">
<svg class="circular" viewBox="25 25 50 50">
<!-- Background ring -->
<circle class="background-ring" cx="50" cy="50" r="22" />
<!-- Loading circle -->
<circle class="path" cx="50" cy="50" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" />
</svg>
</div>
</div>
</body>
</html>
