问题
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.
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.
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
Bug? Fixes?
Tried in: Chrome 24.0.1312.52 m, in other browsers (including Safari) seems to work ok.
回答1:
I can't recreate the jittering result span, but I do see the flickering scrollbar. Looks like it may be a known bug:
Issue 139928: CSS transition on the width of an element with display "inline-block" causes jitter
来源:https://stackoverflow.com/questions/14386512/chrome-css-image-transitions-affect-other-elements