CSS旋转方块导致高度弯曲——Chrome答案

【问题标题】：CSS rotating squares causing height flexing -- ChromeCSS旋转方块导致高度弯曲——Chrome
【发布时间】：2016-04-09 13:21:54
【问题描述】：

我正在开发一个涉及一些旋转圆圈的代码笔。似乎仅在 Chrome 中，旋转会导致文档高度弯曲。要了解我刚才所说的内容，请查看到目前为止的内容并滚动到底部并观察所有内容的高度扩展和收缩。这是codepen。如果你不明白这个问题，请告诉我。

/*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>

【问题讨论】：

它会......虽然正方形不会改变大小，但有效高度会......由于毕达哥拉斯。
@Paulie_D 它只发生在 Chrome 中。我可以理解为什么会发生这种情况，但我不明白为什么只有 Chrome。

标签： html css google-chrome flexbox

【解决方案1】：

这是因为加载器使用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

【讨论】：