Safari(桌面和移动)中的 CSS skewY 过渡错误

Question

在为 skewY() 属性设置动画时，该问题很明显。看起来元素的宽度缩小了一点，不再接触到同样宽度的容器的边。

使用 skewX() 设置动画时不会发生同样的情况 - 高度按预期设置动画。

我只在桌面和移动浏览器的 Safari 中遇到此错误。 Firefox 和 Chrome 按预期工作。此问题仅在过渡或动画期间可见。

GIF 预览:

Animation in Firefox/Chrome

Animation in Safari

.arrow {
  position: absolute;
  top: 20px;
  left: 20px;
  bottom: 20px;
  right: 20px;
  background-color: rgb(230, 230, 230);
}

.rect-x {
  position: absolute;
  left: calc(50vw - 50px);
  top: 0;
  width: 100px;
  height: 100%;
  background-color: blue;
  animation: skew-x 1s linear alternate infinite;
  transform-origin: center;
}

.rect-y {
  position: absolute;
  left: 0;
  top: calc(50vh - 50px);
  width: 100%;
  height: 100px;
  background-color: red;
  animation: skew-y 1s linear alternate infinite;
  transform-origin: center;
}

@keyframes skew-x {
  0% { transform: skewX(15deg) skewY(0); }
  to { transform: skewX(-15deg) skewY(-0);}
}

@keyframes skew-y {
  0% { transform: skewX(0) skewY(15deg); }
  to { transform: skewX(0) skewY(-15deg); }
}

<div class="arrow">
  <div class="rect-y"></div>
  <div class="rect-x"></div>
</div>

Answer 1

尽量使用浏览器前缀。

.arrow {
  position: absolute;
  top: 20px;
  left: 20px;
  bottom: 20px;
  right: 20px;
  background-color: rgb(230, 230, 230);
}

.rect-x {
  position: absolute;
  left: calc(50vw - 50px);
  top: 0;
  width: 100px;
  height: 100%;
  background-color: blue;
  animation: skew-x 1s linear alternate infinite;
  -webkit-animation: skew-x 1s linear alternate infinite;
  transform-origin: center;
  -webkit-transform-origin: center;
}

.rect-y {
  position: absolute;
  left: 0;
  top: calc(50vh - 50px);
  width: 100%;
  height: 100px;
  background-color: red;
  animation: skew-y 1s linear alternate infinite;
  -webkit-animation: skew-y 1s linear alternate infinite;
  transform-origin: center;
  -webkit-transform-origin: center; 
}

@keyframes skew-x {
  0% { transform: skewX(15deg) skewY(0); }
  to { transform: skewX(-15deg) skewY(-0);}
}

@-webkit-keyframes skew-x {
  0% { -webkit-transform: skewX(15deg) skewY(0); }
  to { -webkit-transform: skewX(-15deg) skewY(-0);}
}

@keyframes skew-y {
  0% { transform: skewX(0) skewY(15deg); }
  to { transform: skewX(0) skewY(-15deg); }
}

@-webkit-keyframes skew-y {
  0% { -webkit-transform: skewX(0) skewY(15deg); }
  to { -webkit-transform: skewX(0) skewY(-15deg); }
}

<div class="arrow">
  <div class="rect-y"></div>
  <div class="rect-x"></div>
</div>