为什么动画变换：skewX（）会增加移动设备上观看元素的高度？

Question

在桌面上一切正常，但在移动设备上看起来高度在开始时增加，当动画结束时，元素恢复原来的高度。为什么呢？

here you can see it on mobile

div{
  animation-name: animation;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin: 100px;
  width: 300px;
  height: 100px;
  background-color: red;
  transform-origin:bottom left;
  -ms-transform-origin:bottom left;
  -webkit-transform-origin:bottom left;
  
}
@keyframes animation{
  0%{
    transform: skewX(91deg);
    -webkit-transform: skewX(91deg);
    -ms-transform: skewX(91deg);
  }
  100%{
    transform: skewX(180deg);
    -webkit-transform: skewX(180deg);
    -ms-transform: skewX(180deg);
  }
}

<div></div>