The layout of the pie (menu) in Safari breaks. How to achieve cross-browser compatibility on the latest versions?

Question

css

I was looking for ready-made solutions, but I did not find any worthwhile ones, some are very cumbersome, others are poorly customized. Tried out of the box solution wheelnav.js . Terribly slow even on top gaming computers when performing svg transformations. I decided to write myself. The layout works great in the latest versions of Chrome and Firefox, but falls apart completely in the Apple Safari browser. Maybe someone faced a similar problem?
Please also look at the decision itself and criticize it. The solution is annoying with some kind of "crutality" and partly tailored - this applies to the coefficients, selected manually for a maximum of 10 menu items:

var kr = [0, 0, 0, 3, 15, 20, 23, 25, 26];
var kb = [0, 0, 0, 0,  4, 10, 18, 23, 27];

If you had to write the generation of such a menu, please share the algorithm (even pseudocode), since my algorithm is in doubt (you need to improve your knowledge of geometry).
Can it be better to make a menu using canvas? In general, I look forward to advice and constructive criticism.
The code is here:
codepen.io/anon/pen/NGXRJd
Thank you all in advance.

Answer 1

To create such svg-pies and other things, D3.js has long been invented . Simply the most excellent library for creation of similar things.

Answer 2

and in my safari as well as in chrome