Why do HTML div elements rotate weird on mobile?

Question

I'm trying to create a pie chart. On desktop (Google Chrome), this pie chart code works as usual and the left and right divs rotate fine. However, opening this code on a mobile device (specifically iPhone 11 running Safari) something weird happens. Right as the page loads on a mobile device, the rotating divs stick out of their parent element circle for a moment, mid-rotation, before eventually going back to normal.

let left = document.getElementById("left");
let right = document.getElementById("right");

function spinPieChart() {
  setTimeout(() => {
    left.style.opacity = 1;
    left.style.transform = "rotate(180deg)";
  
    setTimeout(function() {
    right.style.opacity = 1;
    right.style.transform = "rotate(60deg)";
    }, 250);
  }, 10);
}

spinPieChart();

* {
    margin: 0;
    padding: 0;
  }
  
  #circle {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background-color: tomato;
    overflow: hidden;
  }
  
  #left {
    height: 100%;
    width: 100%;
    background-color: lightblue;
    transform-origin: right;
    opacity: 0;
    transition: opacity 0s, transform 250ms;
    transition-timing-function: ease-in;
  }
  
  #right {
    height: 100%;
    width: 100%;
    background-color: lightblue;
    transform-origin: left;
    opacity: 0;
    transition: opacity 0s, transform 250ms;
    transition-timing-function: ease-out;
    z-index: 1;
  }
  
  #cover {
    position: absolute;
    height: 100%;
    width: 50%;
    background-color: tomato;
    left: 0;
  }

<div id="circle">
  <div id="left"></div>
  <div id="right"></div>
  <div id="cover"></div>
 </div>

Answer 1

you can draw the same using svg and circle elements and apply the CSS for animation (eg. @keyframes).

svg {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}

circle {
    fill:rgba(0,0,0,0);
  stroke-width:31.8309886184;
  stroke-dasharray: 0,0,0,100;
  stroke-dashoffset: 25;
  -webkit-animation: pie1 3s 1 ease both;
  animation: pie1 3s 1 ease both;
}

.pie1 {
  stroke:lightblue;
}

.pie2 {
  stroke:tomato;
  -webkit-animation-name: pie2;
  animation-name: pie2;
}

/* 1st pie is 70% */
@-webkit-keyframes pie1 {
  50%,100% {stroke-dasharray: 70,30,0,0;}
}

@keyframes pie1 {
  50%,100% {stroke-dasharray: 70,30,0,0;}
}

/* 2nd pie is 30% */
@-webkit-keyframes pie2 {
  50%,100% {stroke-dasharray: 0,70,30,0;}
}

@keyframes pie2 {
  50%,100% {stroke-dasharray: 0,70,30,0;}
}

<div>
  <svg viewBox="0 0 63.6619772368 63.6619772368">
    <circle class="pie1" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
    <circle class="pie2" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
  </svg>
</div>