CSS旋转的正方形引起高度弯曲 - Chrome

-1

我正在研究一个涉及一些旋转的圆圈的codepen。似乎只在Chrome中，旋转会导致文档高度发生弯曲。为了理解我刚刚所说的话，查看我目前为止的内容并滚动到底部并观察所有事物的高度膨胀和收缩。这是codepen。如果你不明白这个问题，请让我知道。CSS旋转的正方形引起高度弯曲 - Chrome

/*loader 1*/ 
 

 
.loader1 { 
 
    width: 64px; 
 
    height: 64px; 
 
    position: relative; 
 
    -o-animation: loaderRotate 2s infinite ease-in; 
 
    -moz-animation: loaderRotate 2s infinite ease-in; 
 
    -webkit-animation: loaderRotate 2s infinite ease-in; 
 
    -ms-animation: loaderRotate 2s infinite ease-in; 
 
    animation: loaderRotate 2s infinite ease-in; 
 
    border-radius: 50%; 
 
    margin: auto; 
 
} 
 
.loader1:after { 
 
    content: ''; 
 
    display: block; 
 
    border: 3px solid transparent; 
 
    border-left: 3px solid #FF3E31; 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    border-radius: 50%; 
 
} 
 
.loader1:before { 
 
    content: ''; 
 
    display: block; 
 
    border: 3px solid transparent; 
 
    border-left: 3px solid #FF3E31; 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    border-radius: 50%; 
 
    -o-animation: borderFlexLoader 2.5s infinite linear; 
 
    -moz-animation: borderFlexLoader 2.5s infinite linear; 
 
    -webkit-animation: borderFlexLoader 2s infinite linear; 
 
    -ms-animation: borderFlexLoader 2.5s infinite linear; 
 
    animation: borderFlexLoader 2s infinite linear; 
 
} 
 
@-o-keyframes loaderRotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@-moz-keyframes loaderRotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@-webkit-keyframes loaderRotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@-ms-keyframes loaderRotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes loaderRotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@-o-keyframes borderFlexLoader { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    50% { 
 
    transform: rotate(180deg); 
 
    } 
 
    100% { 
 
    transform: rotate(0deg); 
 
    } 
 
} 
 
@-webkit-keyframes borderFlexLoader { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    50% { 
 
    transform: rotate(180deg); 
 
    } 
 
    100% { 
 
    transform: rotate(0deg); 
 
    } 
 
} 
 
@-moz-keyframes borderFlexLoader { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    50% { 
 
    transform: rotate(180deg); 
 
    } 
 
    100% { 
 
    transform: rotate(0deg); 
 
    } 
 
} 
 
@-ms-keyframes borderFlexLoader { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    50% { 
 
    transform: rotate(180deg); 
 
    } 
 
    100% { 
 
    transform: rotate(0deg); 
 
    } 
 
} 
 
@keyframes borderFlexLoader { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    50% { 
 
    transform: rotate(90deg); 
 
    } 
 
    100% { 
 
    transform: rotate(0deg); 
 
    } 
 
} 
 
/*end loader 1*/ 
 

 
/*loader2*/ 
 

 
.loader2 { 
 
    position: relative; 
 
    width: 64px; 
 
    height: 64px; 
 
    border-radius: 50%; 
 
    margin: 3em auto; 
 
} 
 
.loader2:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    border: 3px solid transparent; 
 
    border-bottom: 3px solid #457AA6; 
 
    border-radius: 50%; 
 
    -o-animation: loader2BorderRotate 1.5s infinite ease; 
 
    -moz-animation: loader2BorderRotate 1.5s infinite ease; 
 
    -webkit-animation: loader2BorderRotate 1.5s infinite ease; 
 
    -ms-animation: loader2BorderRotate 1.5s infinite ease; 
 
    animation: loader2BorderRotate 1.5s infinite ease; 
 
} 
 
.loader2:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    border: 3px solid transparent; 
 
    border-top: 3px solid #457AA6; 
 
    border-radius: 50%; 
 
    -o-animation: loader2BorderRotate 3s infinite ease reverse; 
 
    -ms-animation: loader2BorderRotate 3s infinite ease reverse; 
 
    -webkit-animation: loader2BorderRotate 3s infinite ease reverse; 
 
    -moz-animation: loader2BorderRotate 3s infinite ease reverse; 
 
    animation: loader2BorderRotate 3s infinite ease reverse; 
 
} 
 
@-o-keyframes loader2BorderRotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@-moz-keyframes loader2BorderRotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@-webkit-keyframes loader2BorderRotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@-ms-keyframes loader2BorderRotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes loader2BorderRotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
/*end loader2*/ 
 

 
/*loader3*/ 
 

 
.loader3 { 
 
    position: relative; 
 
    width: 64px; 
 
    height: 64px; 
 
    border-radius: 50%; 
 
    margin: 3em auto; 
 
} 
 
.loader3:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    border: 3px solid transparent; 
 
    border-bottom: 3px solid #2D9D31; 
 
    border-left: 3px solid #2D9D31; 
 
    border-radius: 50%; 
 
    animation: loader3BorderRotate 2s infinite; 
 
} 
 
.loader3:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    border: 3px solid transparent; 
 
    border-top: 3px solid #2D9D31; 
 
    border-right: 3px solid #2D9D31; 
 
    border-radius: 50%; 
 
    animation: loader3BorderRotate 2s infinite reverse; 
 
} 
 
@-o-keyframes loader3BorderRotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@-moz-keyframes loader3BorderRotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@-webkit-keyframes loader3BorderRotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@-ms-keyframes loader3BorderRotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes loader3BorderRotate { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
/*end loader3*/ 
 

 
/*loader4*/ 
 

 
.loader4 { 
 
    border-radius: 50%; 
 
    width: 64px; 
 
    height: 64px; 
 
    position: relative; 
 
    margin: 3em auto; 
 
} 
 
.loader4:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    border-radius: 50%; 
 
    border: 3px solid transparent; 
 
    border-right: 3px solid #FFFFFF; 
 
    border-top: 3px solid #FFFFFF; 
 
    margin: -2px; 
 
    -o-animation: loader4 1s infinite ease; 
 
    -moz-animation: loader4 1s infinite ease; 
 
    -webkit-animation: loader4 1s infinite ease; 
 
    -ms-animation: loader4 1s infinite ease; 
 
    animation: loader4 1s infinite ease; 
 
} 
 
.loader4:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    border-radius: 50%; 
 
    border: 3px solid transparent; 
 
    border-left: 3px solid #000; 
 
    border-bottom: 3px solid #000; 
 
    -o-animation: loader4 1.5s infinite ease; 
 
    -moz-animation: loader4 1.5s infinite ease; 
 
    -webkit-animation: loader4 1.5s infinite ease; 
 
    -ms-animation: loader4 1.5s infinite ease; 
 
    animation: loader4 1.5s infinite ease; 
 
} 
 
@-o-keyframes loader4 { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@-moz-keyframes loader4 { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@-webkit-keyframes loader4 { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@-ms-keyframes loader4 { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
@keyframes loader4 { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
/*end loader4*/ 
 

 
/*loader 5*/ 
 

 
.loader5 { 
 
    width: 64px; 
 
    height: 64px; 
 
    position: relative; 
 
    border-radius: 50%; 
 
    animation: loader5 1.5s infinite ease reverse; 
 
    margin: 3em auto; 
 
} 
 
.loader5:after { 
 
    content: ''; 
 
    display: block; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    border: 3px solid transparent; 
 
    border-bottom-color: #fff; 
 
    border-left-color: #fff; 
 
    margin: -3px; 
 
    animation: loader5 3s infinite ease reverse; 
 
} 
 
.loader5:before { 
 
    content: ''; 
 
    display: block; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    border: 3px solid transparent; 
 
    border-right-color: #000; 
 
    border-top-color: #000; 
 
    animation: loader5 3s infinite ease; 
 
} 
 
@keyframes loader5 { 
 
    0% { 
 
    transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
/*end loader5*/ 
 

 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #333; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="loader1"></div> 
 
<div class="loader2"></div> 
 
<div class="loader3"></div> 
 
<div class="loader4"></div> 
 
<div class="loader5"></div>

来源

2016-01-05 www139

它会......虽然方没有尺寸，有效高度不...由于改变毕达哥拉斯。 –

@Paulie_D它只在Chrome中发生。我可以理解为什么会发生这种情况，但我不明白为什么只有Chrome。 – www139

这是因为装载机使用margin:auto居中，当屏幕高度是不够的，你会发现弯曲的效果。从Chrome浏览器开发工具检查下面的图片：

解决方案：包装所有装载机在一个div，并给它overflow:hidden

HTML

<div class="wrapper"> 
    <div class="loader1"></div> 
    <div class="loader2"></div> 
    <div class="loader3"></div> 
    <div class="loader4"></div> 
    <div class="loader5"></div> 
</div>

CSS

.wrapper { 
    overflow: hidden; 
}

DEMO

来源

2016-01-05 16:35:35 shadeed9

CSS旋转的正方形引起高度弯曲 - Chrome

回答

相关问题