jquery - CSS 过渡和 Bootstrap 中类变化的像素撕裂

Question

我在使用 Bootstrap 3 执行 jQuery 类切换和 CSS 过渡动画时遇到了一点点像素撕裂/滑动的问题。这就像一个(或几个)像素在进行过渡时移动，但是有时很明显。

它发生在 Firefox、Opera Legacy(低于 15)和基于 Webkit 的浏览器(Chrome 和 Opera 15+)中。我不知道这是浏览器错误、Bootstrap 错误还是其他原因。

这是我所说的 fiddle :http://www.bootply.com/84414

编辑:要使其更引人注目，请更改 CSS 中的过渡时间。 3 秒足以看到它。

Answer 1

我知道这是一个很老的问题，但我在寻找解决我遇到的问题时偶然发现了这个问题。

无论如何，您的动画看起来有点撕裂。尝试通过将此应用到必要的元素来强制它进行硬件加速。

*{
    -webkit-transform: translate3d(0, 0, 0);
 }

我将所有元素应用到你的 fiddle 上作为测试，它似乎修复了它