Safari 中的 CSS skewY 转换错误（桌面和移动）

Question

为skewY()属性设置动画时会出现此问题。 看起来元素的宽度缩小了一点，不再接触同样宽的容器的侧面。

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

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

GIF 预览：

Firefox/Chrome 中的 Animation

Animation 在 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>