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

回答

相關問題