我最近挖出了一个 old piece of JS code我写道，我认为我可以免费使用，但我发现 3 年前困扰我的一个 CSS 动画渲染问题今天仍然存在。
它涉及对来自 left:100% 的元素进行动画处理/transform: translateX(100%)或 top:100%/translateY(100%)至 0 ，这实际上是从父元素的右侧或底部到原点。
我一直在 Mac OS X (47.0.2526.111) 上的 Google Chrome 中进行测试，出现了错误的渲染，这在这个例子中是可见的:https://jsfiddle.net/lvl99/g29o0005/
故障本质上是将过渡元素立即移动到原点位置，然后动画离开屏幕，然后跳回到原点位置。
当我最初调试问题时，我发布了一个问题 here一个可行的解决方案是更改 100%值类似于 92.5%在 CSS 中。这适用于 left/translateX值，但不适用于 top/translateY值(value)观。
这个故障的一个有趣方面是将负值渲染回原点没有问题，即 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 的常规构建中得到解决，但是对于跨越许多旧版本的跨浏览器来说，找到一种方法将是有益的非跳跃渲染。
最佳答案
我现在有一台新的 Mac 电脑，一年后重新审视这个问题，我发现 Google Chrome 现在似乎可以很好地处理这个问题。问题可能出在我用了 7 年的 Mac 显卡上!
关于css - 跨浏览器 CSS 支持 100% transform translate 动画移动的故障，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35036170/