使用CSS动画“左”时，Chrome中文本的奇怪斩波/拉伸

Question

当我为包含文字的元素设置动画时，我在Google Chrome中看到了一种非常奇怪的效果。

如果没有动画，部分文本会被其父元素的边界隐藏。当我使用@keyframes为html, body { height: 100%; margin: 0; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; } .container { width: 10em; overflow: hidden; margin: 1em; } .text { white-space: nowrap; position: relative; animation-name: marquee; animation-duration: 3s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes marquee { from { left: 0; } to { left: -100%; } }属性设置动画时，其中一部分会重复复制或拉伸。这似乎不适用于Firefox，并且似乎不会出现不同的内容，例如CSS模式。

我无法想象我是第一个发现这个的人。这是一个已知的问题？在某处我可以阅读错误报告吗？

示例：

演示：

<div class="container">
  <div class="wrapper">
    <div class="text">Now is the time for all good men to come to the aid of their party.</div>
  </div>
</div>

type

Answer 1

我也遇到过类似的问题。问题是与webkit相关的。 解决这个问题包括

body{
       -webkit-backface-visibility: hidden;
     }

如果您遇到Chrome上存在的异常动画问题，请使用相同的代码。