【发布时间】：2016-05-04 08:01:15
【问题描述】：
我最近挖出了一个old piece of JS code，我写了我以为我会放到网上免费使用，我发现3年前困扰我的一个CSS动画渲染问题今天仍然存在。
它涉及从left:100%/transform: translateX(100%) 或top:100%/translateY(100%) 到0 的元素的动画，这实际上是从父元素的右侧或底部到原点 em>。
我一直在 Mac OS X (47.0.2526.111) 上的 Google Chrome 中进行测试，结果出现了渲染问题，这在此示例中可见：https://jsfiddle.net/lvl99/g29o0005/
故障实质上是将过渡元素立即移动到原点位置，然后动画离开屏幕，然后跳回原点位置。
当我最初调试问题时，我发布了一个问题 here，一个可行的解决方案是将 CSS 中的 100% 值更改为 92.5% 之类的值。这适用于 left/translateX 值，但不适用于 top/translateY 值。
关于这个故障的一个有趣的方面是，将负值渲染回原点没有问题，即 left:-100%/transform:translateX(-100%) 和 top:-100%/transform:translateY(-100%) 似乎都可以完美渲染（从顶部或父元素的左侧到原点，没有跳跃）。
我在 iPad 上使用 Google Chrome 和最新版本的 Google Chrome Canary 进行了测试，呈现问题似乎已得到解决。我还在计算机上使用 Mozilla Firefox (43.0.4) 和 Safari (8.0.8 (10600.8.9)) 进行了测试，它们似乎可以忠实地呈现它，但是对于 3d 和卡片过渡样式，存在一些分层问题（可能这是z-index 或transform-style: preserve-3d 问题吗？）
我有一台旧 MacBook Pro（2009 年中），所以这可能与我的显卡有关。我想知道其他人是否有任何类似的渲染问题或屏幕外元素动画的经验。我已经使用backface-visibility: hidden 来解决任何其他渲染问题。
由于 Google Chrome Canary 的表现要好得多，我希望它会在 Google Chrome 的常规版本中得到解决，但对于跨许多旧版本的跨浏览器来说，找到一种方法来拥有它是有益的非跳跃渲染。
【问题讨论】：
-
里面有很多代码和动画。你能把它简化成一个最小的可验证的例子吗？
-
干杯；现在更新为通过 RawGit CDN 引用插件文件，而不是嵌入在 jsfiddle 中
-
这看起来简单多了 :) 顺便说一句，我已经尝试选择 4 个选项中的每一个，但没有发现任何问题。我正在使用 Chrome v 43。
-
感谢您查看。完全没有跳跃或奇怪的渲染问题？你是 Mac 还是 Windows？可能是我的显卡。我也注意到 3d 模式似乎在 Chrome 中渲染效果不错，所以也许我可以触发一些 3d 渲染漏洞来确保其他模式渲染得更好。
-
我在 Windows 7 @Matt 上，不，我没有看到任何渲染问题。
标签： css animation transform translate