Greetings, I am facing an issue with centering an element on Apple devices. In the screenshots provided, you can see how it appears on iOS, Android, and a Windows PC. Despite trying various methods, I have been unable to solve the problem. Can you spot any issues in my code or offer any suggestions? Your assistance is greatly appreciated.
Edit: The image at the center of this circle was rounded using Photoshop, no additional code was used. My focus is solely on the centering issue. While everything works fine on Android and PC, it seems like I may be missing specific lines of code for iOS. Centering also fails on Google Chrome for iOS.
Code:
<style>
#rotatingText {
animation-name: rotate-circle;
animation-duration: 22s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
u/keyframes rotate-circle {
to {
transform: rotate(1turn);
}
}
.text {
font-weight: 300;
letter-spacing: 3.3px;
text-transform: uppercase;
font-family: 'Outfit';
font-size: 14px;
fill: white;
text-shadow: white 1px 0 10px;;
}
.main {
display: grid;
align-items: center;
justify-items: center;
}
.main img {
position: absolute;
}
.main img {
position: absolute;
border-radius: 500px;
z-index: 0;
box-shadow: rgba(245, 72, 243, 0.3) 1px 0 50px;;
}
</style>
<a target=”_blank” href="https://9ypjmq3pbhg.typeform.com/to/vz0yqohg">
<div class="main">
<img class="img1" src="https://polygonstudio.eu/wp-content/uploads/2024/06/imgrotate2.png" width="120" height="50">
<svg id="rotatingText" viewBox="0 0 200 200" width="200" height="200">
<defs>
<path id="circle" d="M 100, 100
m -75, 0
a 75, 75 0 1, 0 150, 0
a 75, 75 0 1, 0 -150, 0
">
</path>
</defs>
<text width="400">
<textPath alignment-baseline="top" xlink:href="#circle" class="text">
Fill out the form - fill out the form -
</textPath>
</text>
</svg>
</div>
</a>
Despite trying various CSS approaches and searching online for solutions, I have not been able to resolve this issue.