正文 

当前位置： 首页 > 问答 >

Firefox中带有缩放变换的CSS过渡效果后的图像移动/跳跃

     2023-03-06     190

关键词：

【中文标题】Firefox中带有缩放变换的CSS过渡效果后的图像移动/跳跃【英文标题】：Image shifting/jumping after CSS transition effect with scale transform in Firefox 【发布时间】：2015-03-05 16:20:08 【问题描述】：

我在最新的 Firefox 浏览器版本 34（系统：Windows 7，屏幕宽度：1600px）中遇到问题。悬停在其上后，我对缩放图像（在某些容器中）产生了影响。我正在使用 transform: scale(1.1) 和 transition: transform 0.3s ease-in-out。但是当我将鼠标悬停在图像上时，图像放大后......它会产生一些奇怪的 1px 偏移。一些渲染浏览器的错误，但我希望现有的一些修复它。

最重要的 CSS 定义和部分 HTML 代码：

figure 
   display: block;
   overflow: hidden;
   position: relative;
   backface-visibility: hidden;

figure img 
   width: 100%;
   transform: scale(1);
   transition: transform 0.3s ease-in-out;
   
figure:hover img 
   transform: scale(1.1);

 <figure>
     <img class="img-responsive" src="http://lorempixel.com/600/400/fashion/7">
 </figure>

有错误的示例在线：http://templates.silversite.pl/test/jumpingimg/

我也看到有人可以修复它，但我不知道如何，例如http://demo.qodeinteractive.com/bridge/上的“我们最近的工作”框

【问题讨论】：

【参考方案1】：

我现在也遇到了同样的问题。此处的解决方案无法解决问题，因此我发布了我为使其正常工作所做的工作。

像 OP 一样，我有一个隐藏了 oveflow 的容器，并且与其中的图像大小相同。图像将在悬停时缩放以创建“缩放”效果 - 但是当最初开始和结束过渡时，图像在底部和右侧“跳跃”/增长了一点点。这使它变得跳跃而不流畅。

我根据百分比计算了组件的尺寸，这导致它们是非整数 (Chrome)。我有一种感觉 Scale & Scale3d 在缩放时围绕像素值，这导致了这种跳跃。我给了一个父容器display:table，这导致所有子容器的宽度/高度都被四舍五入为整数值。这解决了我的问题，图像现在可以平滑缩放！

【讨论】：

是的！这对我有用！仅在某些浏览器宽度上发生，但如果您需要完美像素，则在父容器上使用 display: table。【参考方案2】：

我刚刚遇到了同样的问题，对我来说，浏览器在缩放完成后会更正十进制像素。或者一些高度和宽度没有被缩放等于并且最终得到纠正的方式。

所以我认为解决方案是使用具有 1 x 1 比率因子的图像。

所以对我来说，当我使用带有width 和height 的400px 的lorempixel 时，问题的代码可以正常工作。

让我知道这是否解决了问题？！

figure 
   display: block;
   overflow: hidden;
   position: relative;
   backface-visibility: hidden;

figure img 
   width: 100%;
   transform: scale(1);
   transition: transform 0.3s ease-in-out;
   
figure:hover img 
   transform: scale(1.1);

 <figure>
     <img class="img-responsive" src="http://lorempixel.com/400/400/fashion/7">
 </figure>

【讨论】：

我有一个页面，它只在方形图像上“跳跃”（因为它们相对较小，如果我增加它们的大小，跳跃就会消失）【参考方案3】：

我在我的项目中遇到了类似的问题。所有图片都是position: absolute;，transform 看起来像这样：

figure img
   transform: translate( -50%, 50%) scale(1);
   position: absolute;
   top: 50%;
   left: 50%;


figure img:hover
   transform: translate( -50%, 50%) scale(1.1);

我将每个scale 替换为scale3d，这解决了我的问题。 最终样式如下所示：

figure img
   transform: translate( -50%, 50%) scale3d(1, 1, 1);
   position: absolute;
   top: 50%;
   left: 50%;


figure img:hover
   transform: translate( -50%, 50%) scale3d(1.1, 1.1, 1);

希望这能解决您的问题

【讨论】：

非常感谢 - 我花了大约一个小时试图弄清楚为什么我的画布上的一些转换后的元素在放大/缩小页面时会奇怪地变形，但是你建议替换“比例”用“scale3d”神奇地解决了这个问题。【参考方案4】：

在您提供的链接上，http://demo.qodeinteractive.com/bridge/ ，如果您真的去这里：http://demo.qodeinteractive.com/bridge/portfolio/gallery-style-condensed/two-columns-grid/，您可以看到，一旦查看开发工具，它们会在左侧/右侧应用“1px”的边距 

.projects_holder.hover_text.no_space article .image img 
   margin: 0 1px;

如果您禁用该样式，当您将鼠标悬停在图像上时，您会看到图像按照您所描述的方式移动。

因此，图片的 CSS 应该是：

figure img 
   width: 100%;
   transform: scale(1);
   transition: transform 0.3s ease-in-out;
   display: block;  /* (or inline-block) */
   margin: 0 1px;

【讨论】：

太棒了！ 5年后，这仍然是解决过渡跳跃问题的方法。 ?

图片轮转切换效果(代码片段)

...，一般针对常规CSS属性；　　transform指变换，如：旋转、缩放，偏移，与transition使用，但是，效果是机械的旋转移动，如果配合transitio 查看详情

CSS3 过渡/悬停效果在 Firefox 中不起作用； Firefox 错误？

】CSS3过渡/悬停效果在Firefox中不起作用；Firefox错误？【英文标题】：CSS3transition/hovereffectnotworkinginFirefox;aFirefoxbug?【发布时间】：2011-09-1216:10:32【问题描述】：我正在尝试创建一个鼠标悬停效果，将顶层向左滑动并使用CSS3显示底... 查看详情

Firefox 浏览器中的 SVG 路径元素缩放转换错误

】Firefox浏览器中的SVG路径元素缩放转换错误【英文标题】：SVGpathelementscaletransitionbuginFirefoxbrowser【发布时间】：2020-06-1803:13:58【问题描述】：我正在尝试通过在其上添加变换比例过渡来在悬停时为svg路径元素设置动画。它在chrom... 查看详情

使用 box-shadow 时，Firefox 中的 CSS3 3D 过渡闪烁

】使用box-shadow时，Firefox中的CSS33D过渡闪烁【英文标题】：CSS33DTransitionsflickeringinfirefoxwhenalsousingbox-shadow【发布时间】：2012-09-0219:41:26【问题描述】：我有一个使用CSS3过渡和3D变换构建的类似苹果的Coverflow元素。http://jsfiddle.net/7eD... 查看详情

css3过渡和2d变换——回顾

1.transition　　语法：transition:propertydurationtiming-functiondelay;　　　　　　transition-property设置过渡效果的css属性名称　　　　　　　　语法：transition-property:none|all|property　　　　　　　　　　　　none没有属性会获得过度效果　　　... 查看详情

尝试使用 html 和 css 获得鼠标悬停缩放过渡效果，但图像溢出，图像的位置正在改变

】尝试使用html和css获得鼠标悬停缩放过渡效果，但图像溢出，图像的位置正在改变【英文标题】：Tryingtogetamousehoverzoomtransistioneffectusinghtmlandcssbutimageisgettingoverflowed,theimagespositionaregettingaltered【发布时间】：2020-05-1414:38:14【问题... 查看详情

Firefox 变换比例图像错误。使用悬停变换过渡时，图像会闪烁自身的一个小版本

】Firefox变换比例图像错误。使用悬停变换过渡时，图像会闪烁自身的一个小版本【英文标题】：Firefoxtransformscaleimagebug.Imageflashesasmallversionofitselfwhenusinghovertransformtransition【发布时间】：2016-07-2105:56:19【问题描述】：在尝试修复... 查看详情

css3中的过渡动画和变换

一、过渡　　过渡效果一般由浏览器直接改变元素的CSS属性实现。　　a、transition属性　　transition属性是一个简写属性，用于设置四个过渡属性：transition-propertytransition-durationtransition-timing-functiontransition-delay　　注释：请始终设... 查看详情

css3中的过渡

...种样式时为元素添加效果。浏览器支持：  IE10、Firefox、Chrome、Opera支持transition属性。  Chrome25之前的版本和Safari浏览器需要加前缀-webkit-。  Fir 查看详情

css变化过渡与动画(代码片段)

...了。1.二维变换CSS变换支持在页面中平移、旋转、变形和缩放元素。从技术角度说，变换改变是元素所在的坐标系统。任何落在元素渲染空间内的像素都会被畸变场捕获，然后再把它们传输到页面上的新位置，或改变大小。元素... 查看详情

mapgis可以缩放吗？

...的点线面转换，然后X,Y的比例设为0.05，就成了。这个事缩放，之后就是添加到同一副图里。这个可以通过粘贴复制实现。先把1:10000的图件关闭，打开缩放口的图件，在其他窗口用“选择”这个功能，全部选择你缩小后的1：:50000... 查看详情

css3transition和transform的应用

...生位移或者变形当只有一个值的时候，只有x轴生效2.scale缩放scaleX()设置在x轴上发生缩放sca 查看详情

FireFox 中的同步 CSS3 过渡不平滑

】FireFox中的同步CSS3过渡不平滑【英文标题】：SynchronousCSS3transitioninFireFoxisnotsmooth【发布时间】：2012-10-1907:26:15【问题描述】：我正在尝试使用CSS3过渡创建选定或悬停菜单效果。我通过同时为border-left-width和padding-left设置动画来... 查看详情

CSS 过渡适用于 IE，但不适用于 Firefox、Chrome 和 Opera [重复]

】CSS过渡适用于IE，但不适用于Firefox、Chrome和Opera[重复]【英文标题】：CSSTransitionworksinIE,butnotinFirefox,ChromenorOpera[duplicate]【发布时间】：2018-12-1314:39:43【问题描述】：早上好：按钮中的CSS转换命令有几个问题。我正在尝试使用过... 查看详情

不透明的 CSS 3 过渡 - Chrome 和 Firefox

】不透明的CSS3过渡-Chrome和Firefox【英文标题】：CSS3TransitionswithOpacity-ChromeandFirefox【发布时间】：2011-10-0517:18:27【问题描述】：当我遇到一个奇怪的问题时，我一直在玩CSS3过渡以淡入覆盖div。基本上，我有一个div元素，它的id上... 查看详情

过渡效果

...在不使用Flash动画或JavaScript的情况下，在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。以下是transition属性... 查看详情

css3过渡

...在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。注释：Chrome25以及更早的版本，需要前缀-webkit-。它如何工作？CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，... 查看详情

使用 CSS 变换在悬停时缩放 SVG 矩形

】使用CSS变换在悬停时缩放SVG矩形【英文标题】：ScalingSVGrectonhoverusingCSStransform【发布时间】：2012-10-2203:19:01【问题描述】：似乎在悬停时对HTML或SVG元素应用相同的CSS变换不会产生相同的效果。正如您在下面的小提琴中看到的那... 查看详情