CSS transition animation behaves abnormally in IOS

sets a hidden circle that rotates to reveal at the beginning of the page. It is found that the transition animation in IOS (safari) is incomplete, showing only the beginning, and then jumping directly to the end state.

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style>
        .wrap {
            width: 200px;
            height: 100px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        .circular {
            height: 160px;
            width: 160px;
            border: 20px solid transparent;
            border-top: 20px solid green;
            border-right: 20px solid green;
            position: absolute;
            border-radius: 50%;
            transform: rotate(-225deg);
            transition: transform 2000ms ease-in;
            left: 0;
            top: 0; 
        }
        .circular.start {
            transform: rotate(-45deg);
        }
        .button {
            margin: 20px auto;
            background-color: -sharpEEEEEE;
            text-align: center;
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="circular"></div>
    </div>
    <div class="button">set</div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.js"></script>
    <script>
        var is = true
        $(".button").click(function () {
            $(".circular").toggleClass("start", is)
            is = !is
        })
        setTimeout(function () {
            $(".button").click()
        }, 100)
    </script>
</body>
</html>

after debugging, there are two ways to avoid this problem.
1.setTimeout trigger time is set above 500ms
2. Outer layer. Wrap does not set overflow

it feels like it should be the problem of IOS rendering mechanism. I don"t know much about it here. Is there a big god to popularize science? by the way, give me a solution.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bbcd40-386eb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bbcd40-386eb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?