悬停图像比例抖动错误

Posted 2023-03-06

【中文标题】悬停图像比例抖动错误

【英文标题】：Hover image scale shake bug

【发布时间】：2021-12-06 08:01:13

【问题描述】：

今天我想让 CSS 悬停在我的项目中。

当我悬停项目并使用 CSS 缩放图像元素时，我设置了 transform: scale 和 transition。项目边框抖动。

我尝试添加will-change: transform;，没有任何变化。

---

GIF（JSFiddle Result 面板宽度：975px）：

这里有错误：

---

JSFiddle

.grid-container 
      margin-right: auto;
      margin-left: auto;
      padding-right: 20px;
      padding-left: 20px;
      max-width: 102.5rem;
    
    .card 
      display: flex;
      flex-flow: row wrap;
      margin-bottom: 0;
      margin-right: -0.625rem;
      margin-left: -0.625rem;
      list-style: none;
    
    .card__item 
      flex: 0 0 auto;
      margin-bottom: 1.25rem;
      margin-right: 0.625rem;
      margin-left: 0.625rem;
      width: calc(33.33333% - 1.25rem);
      min-width: 0;
      min-height: 0;
    
    .card__link 
      position: relative;
      display: block;
      overflow: hidden;
      background-color: #fff;
      box-shadow: 0 0 18.4px 1.6px rgba(0, 0, 0, 0.3);
      transition: box-shadow 0.3s;
      cursor: pointer;
    
    .card__link::before 
      content: '';
      display: block;
      padding-top: 56.25%;
    
    .card__img-box 
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-position: center center;
      background-size: cover;
      transition: transform 0.3s;
    
    .card__text-box 
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      text-align: center;
      color: #fff;
    
    .card__title 
      margin-top: 0;
      margin-bottom: 0;
      font-size: 1.8rem;
      font-weight: 500;
      line-height: 1.5;
    

    /* Hover */
    .card__link:hover 
      box-shadow: 0 0 18.4px 1.6px rgba(0, 0, 0, 0.5);
    

    .card__link:hover .card__img-box 
      transform: scale(1.1);
    

<div class="grid-container">
  <ul class="card">
    <li class="card__item"><a class="card__link" href="#">
        <div class="card__img-box" style="background-image: url(https://picsum.photos/480/270);"></div>
        <div class="card__text-box">
          <h3 class="card__title">Lorem Ipsum</h3>
        </div>
      </a></li>
    <li class="card__item"><a class="card__link" href="#">
        <div class="card__img-box" style="background-image: url(https://picsum.photos/480/270);"></div>
        <div class="card__text-box">
          <h3 class="card__title">Lorem Ipsum</h3>
        </div>
      </a></li>
    <li class="card__item"><a class="card__link" href="#">
        <div class="card__img-box" style="background-image: url(https://picsum.photos/480/270);"></div>
        <div class="card__text-box">
          <h3 class="card__title">Lorem Ipsum</h3>
        </div>
      </a></li>
  </ul>
</div>

为什么会出现这个错误？

如何修复错误？

---

【问题讨论】：

似乎是浏览器错误

你用的是什么浏览器？

我使用 Chrome 版本 94.0.4606.81 (Windows 10)

【参考方案1】：

看起来像一个浏览器错误（在 firefox 中确认）

看起来您可以通过将transform: scale(1) 添加到其容器（.card__link）来解决此问题。