Webkit 浏览器中的 CSS 过渡填充故障

Posted 2023-03-06

【中文标题】Webkit 浏览器中的 CSS 过渡填充故障

【英文标题】：CSS transition padding glitch in webkit browsers

【发布时间】：2013-12-19 10:51:05

【问题描述】：

当我在 css 过渡中使用填充时，webkit 浏览器（safari osx、Chrome osx 和 Chrome 窗口）在每个过渡的开始和结束时都会出现小故障，导致放置在动画元素之后的元素移动 1px .

http://jsfiddle.net/QG4QV/19/

html

test test test <span class="test">Hover me</span> test test test test

CSS

.test
  color:#FFF;
  background:#000;
  padding:4px 4px 4px 30px;
  transition: padding 0.5s linear;


.test:hover
  padding:4px 30px 4px 4px;

我已经搜索并尝试了各种解决方案，但没有解决这个例子？！ CSS transition glitch CSS transition effect makes image blurry / moves image 1px, in Chrome?

（充满可能解决方案的示例：http://jsfiddle.net/QG4QV/18/，但没有任何效果）

【参考方案1】：

我不知道这个故障是否有其他解释。我猜想填充值的动画在过渡期间会导致舍入不一致，这会影响.test 元素的整体宽度。

我发现下面的 CSS 在 Chrome33 中为我修复了它。

test 
    display:inline-block;

Demo

编辑：所以看看Chrome DevTools中的元素，没有display:inline-block，“Hover Me”文本本身有一个和height=auto计算样式。

使用inline-block，文本具有width=60 和height=20 的计算样式。我认为正是这种 hard 计算样式阻止了过渡故障。

【讨论】：

遗憾的是，在 Safari 中问题仍然存在

啊，抱歉，这里没有 Safari 可供测试。稍后我会尝试另一台机器。