Chrome CSS image transitions affect other elements

南笙酒味 提交于 2019-12-11 10:23:40

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!