Internet Explorer 闪烁问题
我正在构建一个 Web 应用程序，其中包含一个运行动画，可重现不可移植的 marquee 元素的行为。我正在使用 http://jscroller2.markusbordihn.de/ 来达到这种效果，但问题的根本原因似乎与库本身没有直接关系（它只是暴露问题的触发器）。
确切的问题如下：
我有一个 html form ，其中有几个用户必须填写的 input 文本字段。 marquee 动画每 X 毫秒运行一次（其中 X 小于 1 秒）。每当文本字段获得焦点时（用户单击它以填充它），文本光标不会闪烁（正如它应该的那样）并永久保持在条形形式（作为 | 符号） - 请原谅我的语言...:-) )。
我已将有问题的代码精简到最低限度，您可以在这里尝试一下： http://jsfiddle.net/kyVqk /。
要进行测试，只需按开始按钮，然后单击文本字段。每次动画运行时，应在输入文本下方的标签上附加一个点，并且光标不应闪烁（这就是问题）。请注意，如果动画以大于 1 秒的时间间隔运行，则不会发生这种情况（您可以在上一个小提琴中测试这一点）并且光标会按预期闪烁。这让我相信问题在于浏览器执行文本渲染以及在更新过程中取消/重新聚焦字段的方式。
此问题特定于 Internet Explorer（至少在版本 6 中），因为其他主要浏览器（Firefox 和 Chrome）不会出现此行为。我尝试直接通过 DOM 对象 innerHTML 更新标签，但没有成功。更改的具体内容也不重要。如果动画仅从元素读取属性，则问题本身不会出现（仅在更新元素的属性 - 任何属性时）。
由于我正在做的项目具有很高的知名度和客户曝光度，因此客户不愿意让这一点过去。有人能解释一下为什么会发生这种情况吗？是否有解决方法（在动画之前/之后从 DOM 附加/分离元素、动画之后重新聚焦等）？请注意，不能选择失去marquee 效果。
I'm building a web app that includes a running animation that reproduces the behavior of a non-portable marquee element. I'm using http://jscroller2.markusbordihn.de/ for that effect but the root cause of the problem does not seem directly related to the library itself (it's just the trigger that exposes the problem).
The exact issue is as follows:
I have an html form with several input text fields which the user must fill. The marquee animation is running every X milliseconds (where X is lower than 1 second). Whenever a text field is focused (the user clicks on it with the intent of filling it out), the text cursor does not blink (as it should) and stays permanently in bar form (as a | sign - pardon my language... :-) ).
I have stripped down the offending code to the bare minimum and you can try it out here: http://jsfiddle.net/kyVqk/.
To test, just press the Start button and then click on text field. A dot should be appended to the label below the input text every time the animation runs and the cursor should not blink (that's the problem). Please note that if the animation runs in time intervals greater than 1 second, this does not happen (you can test this in the previous fiddle) and the cursor blinks as expected. This has led me to believe the problem lies in the way the browser performs the rendering of the text and unfocus/refocus the field during the update process.
This issue is specific to Internet Explorer (at least in version 6), as other major browsers (Firefox and Chrome) do not present this behavior. I've tried updating the label through the DOM's object innerHTML directly but with no success. The exact content that's changed is of no importance either. If the animation only reads properties from the element, the issue does not present itself (only when updating the element's properties - any property).
Since the project I'm working on has high visibility and client exposure, the client is not willing to let that pass. Can anybody shed some light on why this happens? Is there a workaround (attaching/detaching elements from the DOM before/after animation, refocusing after animation, etc.)? Please note that losing the marquee effect is not an option.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我过去在使用 IE 时遇到过一些闪烁的问题，不知道它是否与你的相同，但尝试一下：
然后我记得的另一个解决方案是为正文设置固定背景......
I got some flickering probs with IE in the past, don't know if it is the same as yours, but give it a try :
Then another fix I remember is to set a fixed background to the body...