时间戳

首页 > 解决方案 > 仅在 Chrome 上悬停抖动时的图像缩放

javascript - 仅在 Chrome 上悬停抖动时的图像缩放

问题描述

我正在尝试修复似乎只在 Chrome 和 Edge、Safari 和 Firefox 中发生的图像缩放问题。我正在使用滑块库（Flickity）和每个图像/幻灯片上的比例悬停效果。当图像缩放时，边缘会出现明显的抖动。这仅在 Chrome 中发生。

我将滑块结构分解为基本的 HTML 和 CSS，并注意到这只发生在滑块添加translateX()具有百分比值或值不是整数的属性时。我假设滑块是根据幻灯片/宽度等的数量来执行此操作的，而这实际上无法更改。必须使用此滑块库，因此不能选择更换为不同的库。

我尝试了很多不同的解决方案，包括 jQuery Transit / JS 等，并且这个问题继续发生，并且仅当translateX()属性存在于百分比值或整数下的值中时才会发生。任何想法将不胜感激。下面是滑块使用的基本但类似的 HTML 结构，包括transitionX()滑块初始化时存在的属性，我包括了用于悬停效果的通用 CSS。

.flickity-slider {
  display: flex;
  position: relative;
  left: 0px;
  transform: translateX(-0.43px);
  max-height: 320px;
  overflow: hidden;
}

.slide {
  overflow: hidden;
  width: 25%;
  margin: 10px;
  max-height: 320px;
}

.slide img {
  transition: transform .5s linear;
  width: 100%;
}

.slide:hover img {
  transform: scale(1.25);
}
<div class="flickity-slider">
  <div class="slide">
    <div class="image">
      <img class="image-scale" src="http://media4.popsugar-assets.com/files/2014/08/08/878/n/1922507/caef16ec354ca23b_thumb_temp_cover_file32304521407524949.xxxlarge/i/Funny-Cat-GIFs.jpg">
    </div>
  </div>

  <div class="slide">
    <div class="image">
      <img class="image-scale" src="http://media4.popsugar-assets.com/files/2014/08/08/878/n/1922507/caef16ec354ca23b_thumb_temp_cover_file32304521407524949.xxxlarge/i/Funny-Cat-GIFs.jpg">
    </div>
  </div>

  <div class="slide">
    <div class="image">
      <img class="image-scale" src="http://media4.popsugar-assets.com/files/2014/08/08/878/n/1922507/caef16ec354ca23b_thumb_temp_cover_file32304521407524949.xxxlarge/i/Funny-Cat-GIFs.jpg">
    </div>
  </div>

  <div class="slide">
    <div class="image">
      <img class="image-scale" src="http://media4.popsugar-assets.com/files/2014/08/08/878/n/1922507/caef16ec354ca23b_thumb_temp_cover_file32304521407524949.xxxlarge/i/Funny-Cat-GIFs.jpg">
    </div>
  </div>
</div>

标签： javascripthtmljquerycsseffect

解决方案

推荐阅读