On iOS (ALL Browsers), the glow effect (via text-shadow and animation) doesn't render on SVG . The same code works as expected on desktop browsers (Chrome, Edge) and Android browsers. I've tried using -webkit prefixes and different methods of CSS for the glowing effect, but none work on iOS Browsersenter image description here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Glowing Text</title>
<style>
@keyframes glowAnimation {
0% {
text-shadow: 0 0 5px #bfff01cc, 0 0 10px #bfff01cc, 0 0 20px #bfff01cc;
}
50% {
text-shadow: 0 0 10px #bfff01cc, 0 0 20px #ffffffcc, 0 0 30px rgba(230, 230, 230, 0.6);
}
100% {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(230, 230, 230, 0.6);
}
}
.glowing-text {
font-size: 40px;
font-family: 'Montserrat', sans-serif;
text-align: center;
animation: glowAnimation 2s infinite alternate;
}
svg {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<section id="home">
<svg viewBox="0 0 200 100" width="100%" height="100%">
<path id="curve" d="M 0 50 C 100 0 100 100 200 50" fill="none" />
<text>
<textPath xlink:href="#curve" startOffset="50%" text-anchor="middle" font-size="12" font-family="Montserrat" fill="#fff">
Legend Barber
</textPath>
</text>
</svg>
</section>
</body>
</html>
Using CSS text-shadow for the glowing effect: It works fine on most browsers (desktop, Android) but doesn’t render on iOS Phones. Using -webkit prefixes on CSS properties: The prefix -webkit-filter and other -webkit changes had no effect. Modifying the SVG text properties like font size, color, and path for better compatibility: Still no glow effect on iOS Phones.