css - 带有 css 的旋转元素的 chrome 动画宽度问题给出了奇怪的三 Angular 形

Question

当我尝试为旋转元素内的绝对定位元素的宽度设置动画时，它会留下奇怪的三 Angular 形。像这样:

它们每次都不一样，而且只发生在 chrome 中。它适用于 Firefox 和 safari。

body,html{
    padding:0;
    margin:0;
    height:100%;
    width:100%;
    overflow: hidden;
}
.container{
    width: 200%;
    height: 200%;
     -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    margin-left:-50vw;
    margin-top:-50vh;
}
.stripe-container{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
     -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
}
.stripe-background{
    position: absolute;
    top:0;
    left:0;
    width: 0;
    height: 100%;
    background-color: #fff;
    webkit-transition: width 900ms ease-out;
    -moz-transition: width 900ms ease-out;
    -o-transition: width 900ms ease-out;
    transition: width 900ms ease-out;
}
.stripe:hover .stripe-background{
    width: 100%;
    webkit-transition: width 900ms ease-out;
    -moz-transition: width 900ms ease-out;
    -o-transition: width 900ms ease-out;
    transition: width 900ms ease-out;
}
.stripe{
    height: 20%;
    position: relative;
}

Link to JSFiddle

Answer 1

最后通过在背景元素上设置 backface-visibility: hidden; 解决了这个问题。