跨浏览器的故障 CSS 支持 100% transform translate 动画移动
Glitches with cross-browser CSS support for 100% transform translate animation movement
我最近挖出了一个 old piece of JS code 我写的，我以为我可以免费使用，我发现一个 CSS 动画渲染问题让我很困惑 3多年前的事，今天还在。
它涉及将元素从 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% 值更改为 [=54= 中的 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 的常规构建中得到解决，但是对于跨越许多旧版本的跨浏览器，找到一种具有非跳跃渲染的方法将是有益的。
我现在有一台新的 Mac 电脑，一年后重新审视这个问题，我发现 Google Chrome 现在似乎可以很好地处理这个问题。问题可能出在我 7 岁 Mac 的显卡上！
我最近挖出了一个 old piece of JS code 我写的，我以为我可以免费使用，我发现一个 CSS 动画渲染问题让我很困惑 3多年前的事，今天还在。
它涉及将元素从 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% 值更改为 [=54= 中的 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 的常规构建中得到解决，但是对于跨越许多旧版本的跨浏览器，找到一种具有非跳跃渲染的方法将是有益的。
我现在有一台新的 Mac 电脑，一年后重新审视这个问题，我发现 Google Chrome 现在似乎可以很好地处理这个问题。问题可能出在我 7 岁 Mac 的显卡上！