【问题标题】:CSS Transition causing images in <a> tags to jump in chromeCSS 过渡导致 <a> 标签中的图像在 chrome 中跳转
【发布时间】:2014-05-03 05:54:03
【问题描述】:

我在标签中包含的图像响应图像(最大宽度:100%)上有一个 CSS3 过渡不透明度,悬停时它会略微改变大小,然后恢复正常,当您移除光标时,它会再次进行相同的调整,我看不到任何会导致这种情况发生的事情。使用 chrome 检查器关闭和打开样式,当不透明度或过渡被关闭时,它就会消失

任何人都可以对此有所了解吗?

【问题讨论】:

标签: google-chrome css css-transitions


【解决方案1】:

一开始看到这个答案enter link description here

第二,尝试检查元素宽度,如果是 300.12px(浮点数宽度),尝试固定宽度,使其四舍五入。

在应用 position:relative to image 后,这个问题有时会消失。

Chrome 有错误。因此,可能还有其他解决方案,以及与之相关的问题。可能是这样,您的情况没有解决方案。比如圆角+缩放动画。

【讨论】:

  • 感谢您的帮助!您的答案中的链接是正确的 - 这解决了它放置在图像上及其周围的标签:-webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1.0, 1.0);
  • 任何时候,我很高兴你已经修好了。
猜你喜欢
  • 2015-10-19
  • 2018-01-20
  • 2021-09-05
  • 2017-05-04
  • 2015-11-15
  • 1970-01-01
  • 2015-11-16
  • 1970-01-01
  • 2017-11-09
相关资源
最近更新 更多