Indeed, I actually tested on iPad and the issue is also there, in all cases was using safari.
I was thinking that maybe I could try a different way to achieve the same result (ie, moving the svg to he section below and use absolute position to overlap the section above, maybe this solve the issue?
Will try and see how it goes, in the meantime anyone might be able to help?
For the curious, wondering why Ethan’s change fixed the issue;
Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static ). If a positioned ancestor doesn’t exist, it is positioned relative to the ICB (initial containing block — see also the W3C definition), which the containing block of the document’s root element.