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;
}
FSS_apple_dev
Users receive reputation points by contributing quality content to the forums.
Posts include post and replies published on the forums.
Post authors can mark replies as Accepted to indicate successful solutions.
Apple Developer Forums admins can mark replies as Apple Recommended to indicate an approved solution
Post
Replies
Boosts
Views
Activity
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>
Hi,
The below code is used for loading GPay icon dynamically from Google in "WKWebView". The same code works for later versions of IOS like 16.4, but issue happens in 16.1 ,16.2 and 16.3 versions.
while loading this code from IOS 16.3 the icon (Gpay icon) is completely black, looks like it's not loaded properly. Please assist us on what can be the issue, and how we can proceed to solve the issue.
Not working
Working