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

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>

这显示了一个每行包含三个项目的网格。页面宽度为 1100 像素，因此一行宽度为 1130 像素（因为左右边距为负）。这意味着一项的宽度为 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>

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

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

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

transform: scale causes strange hairline difference in OSX Chrome on Retina screen

html

css

image

css-transforms