Css 图像比例转换会导致浮动图像在Chrome中进一步抖动

我的div class

.product

包含一个数字浮动内联块，文本位于右侧。这将呈现一系列单元格的外观，一个低于另一个

我遇到过一些问题，当在序列中的某个图形上方开始带有过渡的缩放变换时，页面下方的一些图形会稍微抖动

当天早些时候，我遇到了一个类似的问题，从标题正下方开始，我认为我通过清除标题两侧的浮动来解决它，但问题在其他地方重新出现，我似乎无法解决它。我尝试添加

溢出：auto

修复包含元素上的浮动，但无效。我还尝试清除浏览器缓存

当我删除特定于webkit转换的代码行时，

-webkit转换：-webkit transform.1s ease in out.1s和
-webkit转换：-webkit转换。1s易入易出。1s，敲击抖动从Chrome中消失，尽管变换效果是即时的，而不是渐进的。我的效果发生得很快，没有多大区别，但在IE、Safari、Opera和Firefox上看起来更精致，它们似乎允许过渡效果而不需要任何特定于浏览器的前缀，而Chrome没有。在非Chrome浏览器中，随着转换的生效，正在进行转换的图像似乎仍会发生轻微的移动，但序列中较远的图像已停止抖动。在Chrome中关闭了过渡功能后，图像缩放时没有任何抖动的迹象，尽管我猜人眼可能会太快而无法识别

我已经达到了一个结果是充分的状态，但我很想知道是否有人能对这些问题提出一些看法

p, li, ol, ul, {font-adjustment:0.5em;}
h1, h2, h3, h4, h5 {font-family: 'umbrageregular' sans-serif;}

h1 {font-size:2em; text-align: center; }
h2 {margin:.5em .1em .1em 1em; font-size:1.4em;}
h3 {font-size:1.2em;}

footer, section {width: 970px; clear: both;}
div.leftNavBar, div.pageContent {float: left;}
div.leftNavBar {width: 400px; } 
div.pageContent {width: 570px; } 
div.product {
       display:inline-block; 
       overflow: hidden; 
       margin: .5em 0 .5em 0;
       background-color: rgba(0,0,0,.1); } 
div.product:hover {
       background-color: 
       rgba(0,0,0,.2); 
       -webkit-transition: background-color .2s ease;
       transition: background-color .2s ease; }
div.product p {margin: 0 0.6em .7em 0; }
div.product h3, h4 {margin:0.5em 1.5em .2em 0; text-align:right;}    

figure {margin: .6em .9em .6em .6em; display:inline-block; float:left;
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        -webkit-transition: -webkit-transform .1s ease-in-out .1s;
        transition: transform .2s ease-in-out .2s;}

figure:hover {margin: .6em .9em .6em .6em;
       -webkit-transform: scale(1);
       transform: scale(1);
       -webkit-transition: -webkit-transform .1s ease-in-out .1s;
       transition: transform .2s ease-in-out .2s;}

我注意到@user1680488已经向谷歌报告了Chrome特有的这个问题