I have a div with several SVG's textPaths that are overlapped with a position absolute. The problem is that I can hover and click in all of them in Google Chrome, but not in Safari (the FlowerAsAntenna & VegetalTheory are not clickable).
Safari seems to not be working with the pointer-events: none in the fill.
<div id="home" style="overflow: hidden;">
<svg class="path-2" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<path id="path-2" d="m18.52,714.45S-100.46,101.25,264.79,16.18c452.75-128.93,318.75,560.07,1285.78,394.85" />
<text x="0" y="0">
<textPath href="#path-2" startOffset="0%" text-anchor="end">
<a href="article.html">Flower as an Antenna Flower as an Antenna Flower as an Antenna Flower as an Antenna Flower as an Antenna Flower as an Antenna</a>
<animate attributeName="startOffset" from="0%" to="100%" begin="0.5s" dur="4s" keySplines="0,0.33,0.66,1" keyTimes="0;1" values="0%;100%" calcMode="spline" fill="freeze" />
</textPath>
</text>
</svg>
<svg class="path-1" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<path id="path-1" d="m0,1080S36.26,69.47,480.52,317.43C937.07,572.25,1160.85,90.85,1220.61,0" />
<text x="0" y="0">
<textPath href="#path-1" startOffset="0%" text-anchor="end">
<a href="article.html">Vegetal Theory Vegetal Theory Vegetal Theory Vegetal Theory Vegetal Theory Vegetal Theory Vegetal Theory Vegetal Theory</a>
<animate attributeName="startOffset" from="0%" to="100%" begin="0.5s" dur="4s" keySplines="0,0.33,0.66,1" keyTimes="0;1" values="0%;100%" calcMode="spline" fill="freeze" />
</textPath>
</text>
</svg>
<svg class="path-3" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<path id="path-3" d="m.02,1111.96s798.88,24.32,823.59-403.78C840.63,413.19,428.37,417.62,487.58.07" />
<text x="0" y="0">
<textPath href="#path-3" startOffset="0%" text-anchor="end">
<a href="article.html">Plants Movement(s) in the Pan-Amazon Region Plants Movement(s) in the Pan-Amazon Region Plants Movement(s) in the Pan-Amazon Region</a>
<animate attributeName="startOffset" from="0%" to="100%" begin="0.5s" dur="4s" keySplines="0,0.33,0.66,1" keyTimes="0;1" values="0%;100%" calcMode="spline" fill="freeze" />
</textPath>
</text>
</svg>
<svg class="path-5" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<path id="path-5" d="m10.55,1034.19s-91.79-372.35,279.57-512C594.42,407.76,583.66,222.53,467.53.23" />
<text x="0" y="0">
<textPath href="#path-5" startOffset="0%" text-anchor="end">
<a href="article.html">Plant Conversations. Video Interview with Heraldo Vallejo Plant Conversations. Video Interview with Heraldo Vallejo</a>
<animate attributeName="startOffset" from="0%" to="100%" begin="0.5s" dur="4s" keySplines="0,0.33,0.66,1" keyTimes="0;1" values="0%;100%" calcMode="spline" fill="freeze" />
</textPath>
</text>
</svg>
<svg class="path-6" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<path id="path-6" d="m.03,1034.27s227.53-12.95,339.36-244.14C451.77,557.81,183.34,337.96,457.02.31" />
<text x="0" y="0">
<textPath href="#path-6" startOffset="0%" text-anchor="end">
<a href="article.html">Public Activities. Plants_Intelligence at Parliament of Plants Public Activities. Plants_Intelligence at Parliament of Plants</a>
<animate attributeName="startOffset" from="0%" to="100%" begin="0.5s" dur="4s" keySplines="0,0.33,0.66,1" keyTimes="0;1" values="0%;100%" calcMode="spline" fill="freeze" />
</textPath>
</text>
</svg>
<svg class="path-4" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<path id="path-4" d="m.04.5s780.98,55.67,821.92,798.99" />
<text x="0" y="0">
<textPath href="#path-4" startOffset="0%" text-anchor="end">
<a href="article.html">Amaranth. Malezas, Unkräuter, Weeds. Plants as political agents in colonized America Amaranth. Malezas, Unkräuter, Weeds. Plants as political agents in colonized America</a>
<animate attributeName="startOffset" from="0%" to="100%" begin="0.5s" dur="4s" keySplines="0,0.33,0.66,1" keyTimes="0;1" values="0%;100%" calcMode="spline" fill="freeze" />
</textPath>
</text>
</svg>This is the Fiddle: https://jsfiddle.net/qznke9b6/
I really can't find a solution CSS/HTML related. But maybe there's a cheat code in JavaScript? Maybe Safari just doesn't support this SVG interactivity?
Thank you.
UPDATE (Temporary solution)
I could not find any correct solution, but I thought this was a nice idea and it actually works pretty well.
The idea is to play with the z-index all the time in 1 second so every path goes from z-index: 1 to z-index:6. Ever element has an own animation for that and a delay so there's never an element with the same value. I also added a css phrase hat makes the selected path have a z-index: 10.
This is the css:
#home .path-1 {
bottom: 10%;
left: 5%;
animation: safariSvgPatch 1s infinite;
animation-delay: 0.66s;
}
#home .path-2 {
right: 26%;
bottom: -46%;
animation: safariSvgPatch 1s infinite;
animation-delay: 1.32s;
}
#home .path-3 {
left: 5%;
bottom: 7%;
animation: safariSvgPatch 1s infinite;
animation-delay: 1.98s;
}
#home .path-4 {
left: -10%;
bottom: -18%;
animation: safariSvgPatch 1s infinite;
animation-delay: 2.64s;
}
#home .path-5 {
left: 55%;
bottom: 8%;
animation: safariSvgPatch 1s infinite;
animation-delay: 3.3s;
}
#home .path-6 {
left: 70%;
bottom: 4%;
animation: safariSvgPatch 1s infinite;
animation-delay: 3.96s;
}
#home svg.path-selected { z-index: 10 !important}
@media (max-width: 1000px) {
svg textPath {
font-size: 31pt;
}
#home .path-1 {
bottom: -4%;
left: -50%;
}
#home .path-2 {
right: 26%;
bottom: -50%;
}
#home .path-3 {
left: -110%;
bottom: 10%;
}
#home .path-4 {
left: -5%;
bottom: -14%;
}
#home .path-5 {
left: 30%;
bottom: -10%;
}
#home .path-6 {
left: 20%;
bottom: 0%;
}
}
@keyframes safariSvgPatch {
/* Safari does not recognize the latests paths because of bounding boxes */
0% { z-index: 1; }
16.666% { z-index: 2; }
33.333% { z-index: 3; }
50% { z-index: 4; }
66.666% { z-index: 5; }
83.333% { z-index: 6; }
100% { z-index: 1; }
}