Question

我有以下标记：

<div class="page">
  <div class="listing">
    <div class="item-wrapper">
      <a class="item" href="#">
        <div class="image">
          <img src="https://unsplash.it/560/330/?random">
        </div>
        <div class="title">Item 001</div>
        <div class="date">31 May 2016, 10:30</div>
        <div class="description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </div>
      </a>
    </div>
  // etc...
</div>

使用以下CSS：

* {
  box-sizing: border-box;  
}

.page {
  width: 1100px;
}

/* the 'grid' as you might say */
.listing {
  margin-left: -15px;
  margin-right: -15px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.listing .item-wrapper {
  flex: 0 0 calc((100% / 3));
  display: flex;
  padding: 0 15px 30px;
}

.item {
  position: relative;
  background-color: #fff;
  width: 100%;
  display: block;
  text-decoration: none;
}
.item .image {
  overflow: hidden;  
}
.item .image img {
  max-width: 100%;
  display: block;
  transition: all 0.3s ease-in-out;  
}

.item:hover .image img {
  transform: scale(1.1);  
}

* {
  box-sizing: border-box;  
}

.page {
  background: #aaa;  
  width: 1100px;
  padding-top: 20px;
  padding-bottom: 20px;
}
/* the 'grid' as you might say */
.listing {
  margin-left: -15px;
  margin-right: -15px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.listing .item-wrapper {
  flex: 0 0 calc((100% / 3));
  display: flex;
  padding: 0 15px 30px;
}

.item {
  position: relative;
  background-color: #fff;
  width: 100%;
  display: block;
  text-decoration: none;
}
.item .image {
  overflow: hidden;  
}
.item .image img {
  max-width: 100%;
  display: block;
  transition: all 0.3s ease-in-out;  
}

.item:hover .image img {
  transform: scale(1.15);  
}

<div class="page">
<div class="listing">
  <div class="item-wrapper">
    <a class="item" href="#">
      <div class="image">
        <img src="https://unsplash.it/560/330/?random">
      </div>
      <div class="title">Item 001</div>
      <div class="date">31 May 2016, 10:30</div>
      <div class="description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </div>
    </a>
  </div>

  <div class="item-wrapper">
    <a class="item" href="#">
      <div class="image">
        <img src="https://unsplash.it/560/330/?random">
      </div>
      <div class="title">Item 002</div>
      <div class="date">31 May 2016, 10:35</div>
      <div class="description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </div>
    </a>
  </div>

  <div class="item-wrapper">
    <a class="item" href="#">
      <div class="image">
        <img src="https://unsplash.it/560/330/?random">
      </div>
      <div class="title">Item 003</div>
      <div class="date">31 May 2016, 10:35</div>
      <div class="description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </div>
    </a>
  </div>
</div>
</div>

这表示每行有三个项目的网格。页面宽度为1100px，因此一行宽度为1130px（因为左边和右边的负边距）。这意味着一个项目是1130/3 = 376.6666px宽。悬停项目时，图像增长到110％。这会导致Chrome中的奇怪行为：图像的一侧或多侧出现白色细线：

或者图像溢出其容器，尽管它是overflow: hidden属性：

我尝试添加.item .image img { will-change: transform; }，但这并没有让它变得更好。

我怀疑它与<div class="image">...</div>的尺寸有关：

但我完全不知道是什么。

有谁知道如何防止这种亚像素舍入伪像？

PS：我在Retina屏幕上使用OSX上的Chrome。

Answer 1

经过一些调试后，我想我发现了为什么会发生这种奇怪的行为！

页面正文的标记是：

<body>
  <div class="wrapper">
    <div class="container">
      <header class="page-header">
        ...
      </header>
      <main>
        <div class="page">
          <div class="listing">
            <div class="item-wrapper">
              <a class="item" href="#">
                <div class="image">
                  <img src="https://unsplash.it/560/330/?random">
                </div>
                <div class="title">Item 001</div>
                <div class="date">31 May 2016, 10:30</div>
                <div class="description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </div>
              </a>
            </div>
            // etc...
          </div>
        </div>
      </main>
    </div>
  </div>
</body>

z-index元素上有<main>个属性。当我删除z-index属性时，我上面提到的奇怪的布局怪癖消失了。

我仍然不知道为什么 z-index导致了这种行为，但我很高兴它不会再发生了： - ）

变换：缩放导致Retina屏幕上的OSX Chrome出现奇怪的细线差异

1 个答案: