正方形在CSS网格中旋转会产生空白

Question

在CSS网格内旋转正方形div会产生间隙。为什么？

这是一个简单的例子：

div {
    height:100%;
    width: 100%;
    margin:0;
    display:block;
}

.square{ 
    background: skyBlue;
}

.rotate{
    transform:rotate(180deg);
}

#grid {
    display: grid;
    height:100vmin;
    width: 100vmin;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(6, 1fr);

    background: white;
    border: 1px solid black;
    margin: auto;
}

<div id=grid>
     <div style="grid-row: 1; grid-column:2">normal</div>
     <div class="square" style="grid-row: 2; grid-column:2"></div>
     <div class="square" style="grid-row: 3; grid-column:2"></div>
     <div class="square" style="grid-row: 4; grid-column:2"></div>


     <div style="grid-row: 1; grid-column:4">rotated (180deg)</div>
     <div class="square rotate" style="grid-row: 2; grid-column:4"></div>
     <div class="square rotate" style="grid-row: 3; grid-column:4"></div>
     <div class="square rotate" style="grid-row: 4; grid-column:4"></div>
</div>

In the snipped code, one can see small gaps between the right column grids. Only the rotated grids apear to have gap between them, while the left column of "normal" (not rotated) grids seems smooth.

为什么旋转后发生间隙？ 我该如何解决？

Answer 1

是否可以看到细线取决于浏览器/屏幕/缩放级别。

例如，在Chrome上，我在您的片段上放大了，这条线来了。

我认为问题就像是舍入错误/边缘效应。该系统正在尝试解决如何处理零件像素的方法 - 在这种情况下，蓝色元素的高度是通过计算然后旋转获得的网格空间的百分比。每次都不是确切的整数。在现代屏幕上，必须转换为一个CSS像素可以是几个屏幕像素。有时，有些屏幕像素会“落后”。 （请注意，细线非常细，不如一个CSS像素）。

查看您的代码是一种艰难的方式，就是将旋转DIV的大小增加几个像素，并相应地重置其位置。这可能适合您的现实生活状况。

div {
  height: 100%;
  width: 100%;
  margin: 0;
  display: block;
}

.square {
  background: skyBlue;
}

.rotate {
  transform: rotate(180deg);
}

#grid {
  display: grid;
  height: 100vmin;
  width: 100vmin;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(6, 1fr);
  background: white;
  border: 1px solid black;
  margin: auto;
}

.rotate {
  height: calc(100% + 2px);
  width: calc(100% + 2px);
  margin-top: -1px;
  margin-left: -1px;
}

<div id=grid>
  <div style="grid-row: 1; grid-column:2">normal</div>
  <div class="square" style="grid-row: 2; grid-column:2"></div>
  <div class="square" style="grid-row: 3; grid-column:2"></div>
  <div class="square" style="grid-row: 4; grid-column:2"></div>


  <div style="grid-row: 1; grid-column:4">rotated (180deg)</div>
  <div class="square rotate" style="grid-row: 2; grid-column:4"></div>
  <div class="square rotate" style="grid-row: 3; grid-column:4"></div>
  <div class="square rotate" style="grid-row: 4; grid-column:4"></div>
</div>