为什么 HTML div 元素在移动设备上旋转很奇怪？

Question

我正在尝试创建饼图。在桌面上 (Google Chrome)，此饼图代码正常工作，left 和 right div 旋转良好。但是，在移动设备（特别是 iPhone 11 运行 Safari）上打开此代码会发生一些奇怪的事情。当页面加载到移动设备上时，旋转的 div 会在旋转过程中暂时从父元素中伸出 circle，然后最终恢复正常。

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

您可以使用 svg 和 circle 元素绘制相同的元素，并将 CSS 应用于动画（例如@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>

为什么 HTML div 元素在移动设备上旋转很奇怪？

Why do HTML div elements rotate weird on mobile?

html

javascript

css

safari

mobile