Javascript does wrong calculation in iOS 17.2

Question

I just noticed that JavaScript is doing wrong calculations in iOS 17.2

You can find the sample code on codepen: https://codepen.io/liveman/pen/MWxmyVv

This is the code to calculate the positions:

-> please check codepen code, it is to long to paste it here…


/* HELPER METHODS */
    PieContextMenu.setMenuButtonG = function (menu_button_G, id, size) {
        menu_button_G.setAttribute("id", id);
        menu_button_G.setAttribute("class", "pcm_group");
        menu_button_G.setAttribute("transform",
            "translate(" + size/2 + "," + size/2 + ")");
            menu_button_G.addEventListener("mouseover", function (e) {
                PieContextMenu.menu_button_mouseover(this);
            });
            menu_button_G.addEventListener("mouseout", function (e) {
                PieContextMenu.menu_button_mouseout(this);
            });
            // menu_button_G.setAttribute("onclick","deneme()");
            return menu_button_G;
    };

    PieContextMenu.setMenuButton = function (menu_button, radius, stroke_width, index, numberOfButton) {
        menu_button.setAttribute("class", "pcm_button");
        menu_button.setAttribute("r", radius);
        menu_button.setAttribute("stroke-width", stroke_width);

        var perimeter = Math.PI*2*radius;
        var size = (perimeter/numberOfButton)+(perimeter/500);
        var rot = -180+((360/numberOfButton)*index);

        menu_button.setAttribute("stroke-dasharray", size + " " + perimeter);
        menu_button.setAttribute("transform", "rotate(" + rot + ",0,0)");

        return menu_button;
    };

    PieContextMenu.setMenuTitle = function (button_title, text, font_size) {
        button_title.textContent = text;
        button_title.setAttribute("class", "pcm_title");
        button_title.setAttribute("y", "0.35em");
        button_title.setAttribute("font-size", font_size);
        button_title.setAttribute("display", "none");
        return button_title;
    };

    PieContextMenu.setMenuIcon = function (button_icon, icon, radius, index, numberOfButton, font_size) {
        //var cont = PieContextMenu.faviconClassToText(icon);
        var rot = -180+((360/numberOfButton)*index);

        var iconRot = -1*(rot+(180/numberOfButton));
        var dot = PieContextMenu.polarToCartesian(radius, iconRot);
        button_icon.textContent = icon;
        button_icon.setAttribute("class", "pcm_icon");
        button_icon.setAttribute("x", dot.x);
        button_icon.setAttribute("y", -dot.y);
        button_icon.setAttribute("dy", "0.35em");
        button_icon.setAttribute("font-size", font_size);
        return button_icon;
    };

    PieContextMenu.setCenterCircle = function (center, radius, size) {
        center.setAttribute("class", "pcm_center");
        center.setAttribute("r", radius);
        center.setAttribute("transform",
            "translate(" + size/2 + "," + size/2 + ")");
    };

    PieContextMenu.polarToCartesian = function (r, alpha) {
        var rad = alpha * (Math.PI/180);
        var dot = {
            x: r * Math.cos(rad),
            y: r * Math.sin(rad)
        };
        return dot;
    };

This example shows a pie menu that opens on a long touch event. The calculation of the menu icons (pcm_icon) does not seem to work anymore, as the icons are in the wrong positions.

wrong positioning of icons

correct position of icons

It worked fine on iOS prior to 17.2. It also works fine on Android and Windows OS.

Is this a WebKit bug (e.g. trigonometric functions) or is there a change in the JS required due to the new WebKit version?

Could you please give me an idea where to look at?

Thank you very much!