html - 绝对定位 div 中的神秘偏移

Question

所以我的小部件除了一个可笑的令人困惑的细节外工作完美。在开发过程中的某个时候，每个 flipper 的 backside 在其翻转过程中都发生了偏移，我终究无法弄清楚是如何发生的。

编辑:添加一个片段

var cells = document.getElementsByClassName("flipper");
var list = document.getElementsByClassName("cardtext");
for (var i = 0; i < list.length; i++)
  list[i].style.display = "none";
for (var j = 0; j < cells.length; j++) {
  cells[j].getElementsByClassName("frontside")[0].textContent = list[Math.floor(Math.random() * list.length)].textContent;
  cells[j].getElementsByClassName("backside")[0].textContent = list[Math.floor(Math.random() * list.length)].textContent;
}

function replaceCardText(c) {
  var randText = Math.floor(Math.random() * list.length);
  if (cells[c].classList.contains("flip"))
    cells[c].getElementsByClassName("frontside")[0].textContent = list[randText].textContent;
  else
    cells[c].getElementsByClassName("backside")[0].textContent = list[randText].textContent;
}

setInterval(function() {
  var randCell = Math.floor(Math.random() * cells.length);
  cells[randCell].classList.toggle("flip");
  setTimeout(function() {
    replaceCardText(randCell);
  }, 400);
}, 750);

#symptoms {}

#grid {
  margin: 0 5%;
  border-collapse: collapse;
  -webkit-perspective: 500px;
  perspective: 500px;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}


/*#grid > div > div {
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }*/

#grid .flipper {
  position: relative;
  display: table-cell;
  width: 175px;
  height: 50px;
  transition: 0.4s;
  transform-style: preserve-3d;
}

.flip {
  transform: rotateX(180deg);
}

#grid .frontside,
.backside {
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #00494F;
  text-align: center;
  font-family: monospace;
  font-size: 12pt;
  font-weight: 800;
  color: #00494F;
}

#grid .frontside {
  z-index: 2;
  transform: rotateX(0deg);
  background: #CCCCCC;
}

#grid .backside {
  transform: rotateX(180deg);
  background: #00A3C4;
}

#grid .cardtext {}

<section id="upper">
  <div id="symptoms">
    <h3>Suffer No Longer!</h3>
    <div id="grid">
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
    </div>
    <div id="grid">
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
    </div>
    <div id="grid">
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
    </div>
    <h3 style="text-align: right">Call Your Coach!</h3>
    <section>
      <div class="cardtext">total weight gain</div>
      <div class="cardtext">beer belly</div>
      <div class="cardtext">heavy hips</div>
      <div class="cardtext">loss of waistline</div>
      <div class="cardtext">pasta cravings</div>
      <div class="cardtext">sugar cravings</div>
      <div class="cardtext">anxiety</div>
      <div class="cardtext">loss of libido</div>
      <div class="cardtext">depression</div>
      <div class="cardtext">bread cravings</div>
      <div class="cardtext">stress overload</div>
      <div class="cardtext">depression</div>
      <div class="cardtext">chocolate cravings</div>
      <div class="cardtext">crave salty snacks</div>
      <div class="cardtext">fight fatigue</div>
      <div class="cardtext">night sweats</div>
      <div class="cardtext">can't fall asleep</div>
      <div class="cardtext">bloating</div>
      <div class="cardtext">shortness of breath</div>
      <div class="cardtext">hot flashes</div>
      <div class="cardtext">can't stay asleep</div>
      <div class="cardtext">sleep apnea</div>
      <div class="cardtext">belching</div>
      <div class="cardtext">cramping &amp; gas</div>
      <div class="cardtext">sinus issues</div>
      <div class="cardtext">low back pain</div>
      <div class="cardtext">mid-back pain</div>
      <div class="cardtext">rt-shoulder pain</div>
      <div class="cardtext">knee pain</div>
      <div class="cardtext">cold susceptibility</div>
      <div class="cardtext">insulin resistance</div>
      <div class="cardtext">slow metabolism</div>
      <div class="cardtext">high cholesterol</div>
      <div class="cardtext">high blood pressure</div>
      <div class="cardtext">ovarian cysts</div>
      <div class="cardtext">allergies</div>
      <div class="cardtext">moon face</div>
      <div class="cardtext">puffy eyes</div>
      <div class="cardtext">thinning hair</div>
      <div class="cardtext">brown skin spots</div>
      <div class="cardtext">yellow eyes</div>
      <div class="cardtext">midriff bulge</div>
      <div class="cardtext">dark circles</div>
      <div class="cardtext">hair loss</div>
      <div class="cardtext">thinning eyebrows</div>
      <div class="cardtext">red skin spots</div>
      <div class="cardtext">vaginal dryness</div>
      <div class="cardtext">ridged nails</div>
    </section>
  </div>
</section>

offset panels

您可以从截图中看到蓝色矩形向上偏移了大约两个像素。

我一直在疯狂地通过检查器查找东西，但我找不到一个可以改变 backside div 位置的属性。有什么线索吗？

Answer 1

有偏移是因为.frontside和.backside div的box-sizing值为content-box (默认值)。因此，当您将它们的 width 和 height 定义为 100% 时，它们的“内容区域”已经占用 175px*50px。由于它们也有 2px 边框，因此整个框的大小为 179px*54px。旋转前不出现偏移，因为.flipper的位置是absolute，附近的.flipper相互覆盖，感觉就像“普通的”。但是，在旋转一个鳍状肢之后，就会出现偏移。

你可以给 .frontsize 和 .backside 一个大的填充(例如 30px)看看会发生什么。

修复很简单:将 box-sizing 定义为 border-box:

#grid .frontside, .backside {
  ...
  box-sizing: border-box;
}

var cells = document.getElementsByClassName("flipper");
var list = document.getElementsByClassName("cardtext");
for (var i = 0; i < list.length; i++)
  list[i].style.display = "none";
for (var j = 0; j < cells.length; j++) {
  cells[j].getElementsByClassName("frontside")[0].textContent = list[Math.floor(Math.random() * list.length)].textContent;
  cells[j].getElementsByClassName("backside")[0].textContent = list[Math.floor(Math.random() * list.length)].textContent;
}

function replaceCardText(c) {
  var randText = Math.floor(Math.random() * list.length);
  if (cells[c].classList.contains("flip"))
    cells[c].getElementsByClassName("frontside")[0].textContent = list[randText].textContent;
  else
    cells[c].getElementsByClassName("backside")[0].textContent = list[randText].textContent;
}

setInterval(function() {
  var randCell = Math.floor(Math.random() * cells.length);
  cells[randCell].classList.toggle("flip");
  setTimeout(function() {
    replaceCardText(randCell);
  }, 400);
}, 750);

#symptoms {}

#grid {
  margin: 0 5%;
  border-collapse: collapse;
  -webkit-perspective: 500px;
  perspective: 500px;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}


/*#grid > div > div {
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }*/

#grid .flipper {
  position: relative;
  display: table-cell;
  width: 175px;
  height: 50px;
  transition: 0.4s;
  transform-style: preserve-3d;
}

.flip {
  transform: rotateX(180deg);
}

#grid .frontside,
.backside {
  box-sizing: border-box;
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #00494F;
  text-align: center;
  font-family: monospace;
  font-size: 12pt;
  font-weight: 800;
  color: #00494F;
}

#grid .frontside {
  z-index: 2;
  transform: rotateX(0deg);
  background: #CCCCCC;
}

#grid .backside {
  transform: rotateX(180deg);
  background: #00A3C4;
}

#grid .cardtext {}

<section id="upper">
  <div id="symptoms">
    <h3>Suffer No Longer!</h3>
    <div id="grid">
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
    </div>
    <div id="grid">
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
    </div>
    <div id="grid">
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
      <div class="flipper">
        <div class="frontside"></div>
        <div class="backside"></div>
      </div>
    </div>
    <h3 style="text-align: right">Call Your Coach!</h3>
    <section>
      <div class="cardtext">total weight gain</div>
      <div class="cardtext">beer belly</div>
      <div class="cardtext">heavy hips</div>
      <div class="cardtext">loss of waistline</div>
      <div class="cardtext">pasta cravings</div>
      <div class="cardtext">sugar cravings</div>
      <div class="cardtext">anxiety</div>
      <div class="cardtext">loss of libido</div>
      <div class="cardtext">depression</div>
      <div class="cardtext">bread cravings</div>
      <div class="cardtext">stress overload</div>
      <div class="cardtext">depression</div>
      <div class="cardtext">chocolate cravings</div>
      <div class="cardtext">crave salty snacks</div>
      <div class="cardtext">fight fatigue</div>
      <div class="cardtext">night sweats</div>
      <div class="cardtext">can't fall asleep</div>
      <div class="cardtext">bloating</div>
      <div class="cardtext">shortness of breath</div>
      <div class="cardtext">hot flashes</div>
      <div class="cardtext">can't stay asleep</div>
      <div class="cardtext">sleep apnea</div>
      <div class="cardtext">belching</div>
      <div class="cardtext">cramping &amp; gas</div>
      <div class="cardtext">sinus issues</div>
      <div class="cardtext">low back pain</div>
      <div class="cardtext">mid-back pain</div>
      <div class="cardtext">rt-shoulder pain</div>
      <div class="cardtext">knee pain</div>
      <div class="cardtext">cold susceptibility</div>
      <div class="cardtext">insulin resistance</div>
      <div class="cardtext">slow metabolism</div>
      <div class="cardtext">high cholesterol</div>
      <div class="cardtext">high blood pressure</div>
      <div class="cardtext">ovarian cysts</div>
      <div class="cardtext">allergies</div>
      <div class="cardtext">moon face</div>
      <div class="cardtext">puffy eyes</div>
      <div class="cardtext">thinning hair</div>
      <div class="cardtext">brown skin spots</div>
      <div class="cardtext">yellow eyes</div>
      <div class="cardtext">midriff bulge</div>
      <div class="cardtext">dark circles</div>
      <div class="cardtext">hair loss</div>
      <div class="cardtext">thinning eyebrows</div>
      <div class="cardtext">red skin spots</div>
      <div class="cardtext">vaginal dryness</div>
      <div class="cardtext">ridged nails</div>
    </section>
  </div>
</section>