Question

是否有人发现或知道在悬停时使用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

请帮我解决这个问题。

Answer 1

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

我将改用这种方法：

请务必在下面的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;
}

应该修复它！

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

1 个答案: