如何修复悬停时CSS变换添加的白线？答案

【问题标题】：How to fix the white line added by CSS transform on hover?如何修复悬停时CSS变换添加的白线？
【发布时间】：2018-04-05 11:54:15
【问题描述】：

是否有人找到或知道针对在悬停时使用 CSS 比例转换的元素上出现的白线/边框的有效修复？

我尝试过类似的方法：transform: translateZ(0)、-webkit-backface-visibility: hidden、transform-style: preserve-3d，但没有任何帮助。

在非视网膜显示器上可以很好地看到这个错误。

Here is a video 对于那些看不到错误的人，你会注意到图像底部有一条 1px 的线。

section {
  padding: 100px 0;
}

figure {
  margin: 0;
  overflow: hidden;
}

figure:before {
  position: absolute;
  z-index: 2;
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(43, 43, 54, 0.3);
  transition: background 0.7s cubic-bezier(0.2, 1, 0.2, 1);
}

.ct-image-container {
  display: flex;
  position: relative;
  transform: scale3d(1, 1, 1);
  transition: transform 0.7s cubic-bezier(0.2, 1, 0.2, 1);
}

.ct-image-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center center;
}

article:hover figure:before {
  background: rgba(43, 43, 54, 0.7);
}

article:hover .ct-image-container {
  transform: scale3d(1.1, 1.1, 1);
}

<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section>
    <div class="container">
      <div class="row no-gutters">
        <article class="col-md-6 col-lg-4 col-xl-4">
          <div class="ct-card-inner">
            <figure>
              <a href="" class="ct-image-container">
                <img src="https://images.unsplash.com/photo-1478033394151-c931d5a4bdd6?w=1568&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
                <div class="ct-ratio" style="padding-bottom: 133.3%"></div>
              </a>
            </figure>
          </div>
        </article>
        <article class="col-md-6 col-lg-4 col-xl-4">
          <div class="ct-card-inner">
            <figure>
              <a href="" class="ct-image-container">
                <img src="https://images.unsplash.com/photo-1465126188505-4f04a0f23a4d?w=1550&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
                <div class="ct-ratio" style="padding-bottom: 133.3%"></div>
              </a>
            </figure>
          </div>
        </article>
        <article class="col-md-6 col-lg-4 col-xl-4">
          <div class="ct-card-inner">
            <figure>
              <a href="" class="ct-image-container">
                <img src="https://images.unsplash.com/photo-1495250357898-6822052ef5b8?w=1650&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
                <div class="ct-ratio" style="padding-bottom: 133.3%"></div>
              </a>
            </figure>
          </div>
        </article>
        <article class="col-md-6 col-lg-4 col-xl-4">
          <div class="ct-card-inner">
            <figure>
              <a href="" class="ct-image-container">
                <img src="https://images.unsplash.com/photo-1446080501695-8e929f879f2b?w=1567&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
                <div class="ct-ratio" style="padding-bottom: 133.3%"></div>
              </a>
            </figure>
          </div>
        </article>

        <article class="col-md-6 col-lg-4 col-xl-4">
          <div class="ct-card-inner">
            <figure>
              <a href="" class="ct-image-container">
                <img src="https://images.unsplash.com/photo-1506512534708-3737d46bffe1?w=1650&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
                <div class="ct-ratio" style="padding-bottom: 133.3%"></div>
              </a>
            </figure>
          </div>
        </article>
        <article class="col-md-6 col-lg-4 col-xl-4">
          <div class="ct-card-inner">
            <figure>
              <a href="" class="ct-image-container">
                <img src="https://images.unsplash.com/photo-1503924087716-07cbd5f49b21?w=1000&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
                <div class="ct-ratio" style="padding-bottom: 133.3%"></div>
              </a>
            </figure>
          </div>
        </article>
      </div>
    </div>
  </section>
</body>

</html>

这是我的JSFiddle

请帮我解决这个问题。

【问题讨论】：

请在您的帖子中包含代码。
@TomM 刚刚添加了代码。
问题出现在哪些浏览器上？
@IlyaStreltsyn 对不起，我忘了提。这个问题似乎只存在于 Chrome 中。我在 Chrome 62.0.3202.62 和 Chrome Canary 64.0.3248.0 中对此进行了测试
我遇到了完全相同的问题。

标签： css hover line transform scale

【解决方案1】：

将backface-visibility: hidden; 添加到您的 img 标签似乎可以解决此问题。

我将改用这种方法：

请务必注释掉下面的 CSS

img {
    position: absolute;
    width: 100%;
    height: 100%;

    /* max-width: 100%; */
    /* max-height: 100%; */
    /* object-fit: cover; */
    /* object-position: center center; */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

应该修复它！

【讨论】：