在 Internet Explorer 10 中重置 css 过渡

Posted 2023-03-06

【中文标题】在 Internet Explorer 10 中重置 css 过渡

【英文标题】：Resetting css transitions in Internet Explorer 10

【发布时间】：2013-02-27 05:32:45

【问题描述】：

在尝试 CSS 转换时，我创建了一个小滚动演示，它将 right css 样式从某个负数转换为 0，然后在 transitionend 事件触发时重新启动以获得无限滚动效果。这是我演示的小提琴 - http://jsfiddle.net/XhFdv/

这适用于最新的 FF、Chrome、Safari (win) 和 Opera。在 IE 10（在 Win 7 和 Win 8 上测试）事件触发，但试图将正确的属性设置回它开始的负数似乎不起作用 - 它通常在设置后保持 0（但不是总是）。

为了让事情更有趣，添加console.log() 或alert() 通常足以让它按预期运行。这让我觉得 UI 层有一些未完成的东西。我尝试将更多样式设置包装在 setTimeout(..., 0) 中，以便渲染可以赶上，但这似乎没有帮助。

这是 IE 10 中的错误，还是我在演示脚本中遗漏了什么？

【问题讨论】：

我以前见过这些类型的错误，它们绝对是一种痛苦。通常超时有效，但我想在这种情况下不会。明天我有时间摆弄，所以我会回复你的；很奇特！

我已将 setTimeout 延迟增加到 10-20 毫秒，这对我来说很有效。

几个月前我向微软提交了一个错误。我相信他们能够重现该问题并将其作为候选错误在下一个主要版本之一中修复。不幸的是，我没有进入 IE 11。

【参考方案1】：

alert() 有效，因为它会阻止脚本执行。作为次要措施：触发重绘或重排的东西将是下一个最好的东西：

通过类属性更改切换visibility:hidden/visible 通过样式属性更改切换visibility:hidden/visible 通过 CSSOM 添加样式表 通过display:none隐藏元素 计算offsetWidth 或offsetHeight 触发scroll 事件 在相关元素的同级上触发 :hover 伪类

参考文献

Onload in Onload

Rendering: repaint, reflow/relayout, restyle

javascript Performance Best Practices:Minimize the number of reflows and repaints

Reflows & Repaints: CSS Performance making your JavaScript slow?

Make the Web Faster: Minimizing browser reflow

Reflow Timer Bookmarklet

Reflow Selector Test Page