Chrome CSS图片转换会影响其他元素 [英] Chrome CSS image transitions affect other elements

问题描述

我有一个菜单，其图像作为背景的按钮动画悬停。

问题是，当我将鼠标悬停在图像上，并获得动画（放大和旋转）页面高音上的其他元素

I have a menu with images as backgrounds for buttons which animate on hover.
The problem is that when I hover over an image and it gets animated (enlarged and rotated) other elements on page treble a few pixels with no apparent reason.

我创建了一个JSfiddle希望我可以重现我的网站上存在的错误（其中页面上的其他图像移动），并仍然给你不是太长的代码。

I have create a JSfiddle hoping that I could reproduce the bug existent on my website (where other images on page got moved) and still give you a not-too-long code.

结果：嗯...而不是得到那个高音的图像是JSfiddle result 无原因移动的文本和来自闪烁的CSS的滚动条。

The result: Well... Instead of images getting that treble is the JSfiddle result text that moves with no reason, and the scrollbar from CSS which flickers.

http://jsfiddle.net/AaXyV/1/

YouTube ： DEMO VIDEO at second 0:10

YouTube: DEMO VIDEO at second 0:10

Bug ？修复？

试用：Chrome 24.0.1312.52 m，在其他浏览器（包括Safari）似乎工作正常。

Tried in: Chrome 24.0.1312.52 m, in other browsers (including Safari) seems to work ok.

推荐答案

我无法重新创建抖动结果跨度，但我看到闪烁的滚动条。看起来可能是已知错误：

I can't recreate the jittering result span, but I do see the flickering scrollbar. Looks like it may be a known bug:

问题139928：显示inline-block的元素的宽度上的CSS转换会导致抖动

这篇关于Chrome CSS图片转换会影响其他元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！