html - 放大时图像抖动

Question

我正在对图像应用 2 个 CSS3 过渡。一切正常。唯一的问题。图像在放大时摇晃。有什么办法可以解决这个问题吗？

演示

CSS

div{
    width:199px;
    height:253;
    margin-left:50px;
    margin-top:50px;
}
div:hover
{   -webkit-transform: scale(1.2);
    -webkit-filter: hue-rotate(180deg);
    -webkit-transition:all 2s linear;
}

编辑：不知何故，我注意到问题不在于高档物业。如果您删除 hue-roate 属性，图像会放大而没有任何抖动。但是我需要动画中的两种效果。

Answer 1

我将过渡放在 img 上并过渡了宽度而不是比例，它似乎修复了摆动

小提琴

div{

    margin-left:50px;
    margin-top:50px;
}
img
{
    width:199px;
}
img:hover
{     width: 238px;
      -webkit-filter: hue-rotate(180deg);
      -webkit-transition:all 2s linear;
 }

Answer 2

问题是图像在不同时间沿不同轴放大，因为它不是正方形图像，并且浮点尺寸被截断为整数。

唯一存在的解决方法是人为地使图像元素呈正方形，以便图像的两个维度同步放大，这将消除感知到的抖动。

不过，如果我能摆脱它，我可能只是减少转换时间，这样抖动就不会那么明显了。