Why is text inside foreignObject not displayed in Safari browser?

Question

css

Hello everyone, there is an animation of the graph - demo
Everything works well, but if you open this case in mobile Safari, then the animation works partially.
The line and dots appear on it, but the names of the months do not.
The problem is only in Safari. Who knows how to solve the problem and what is it in general?
Link to view the result in full screen on the phone - jsfiddle.net/eg8ps619/5/embedded/result/dark#Result

Answer 1

Hello, I tried a lot of things: namespaces for divs, x, y, width, heigh attributes for foreignObject, two mobile versions of safari, etc., but only by specifying position: fixedfor months I managed to show them. When debugging, it is clear that the months are in their places, they are just not visible. This, of course, does not claim to be a solution. If I were you, I would do this without using svg at all. Or try without foreignObject, using svg elements like text. Safari is hopeless