Chrome Bug - window.scroll方法拦截DOM渲染 [英] Chrome Bug - window.scroll method intercepts DOM Rendering

问题描述

首先，使用此页面上的导航菜单（左侧）：
http：// bestds .com / TankStorage /

我正在使用javascipt来点击这些li元素更新dom backgroundColor。

Firefox呈现更新的DOM元素，但Chrom和Chromium不会渲染它们。

使用Chromium的文档检查器，我可以清楚地看到li元素背景颜色已经正确更新，但没有被渲染。有趣的是，当我将光标悬停在Chrom的文档检查器中的未渲染的html元素上后，会不会继续渲染DOM？

我该如何解决？

解决方案

我想出来了。 Chrom有一个渲染错误。

如果您调用窗口滚动功能，则在更新某些DOM属性后，Chrom将不会完全呈现所有DOM修改。 p>

为了解决这个问题，我替换了这一行：

  window.scroll （0，docPos）; 
  

使用这一行：

  setTimeout（'window.scroll（0，'+ docPos +'）'，1）; 
  

这使得Chrom可以在窗口滚动显示错误停止之前渲染dom更改。

First, play with the navigation menu on this page (left-side): http://bestds.com/TankStorage/

I'm using javascipt to update the dom backgroundColor of these li elements upon click.

Firefox renders the updated DOM elements, but Chrom and Chromium do not render them.

Using Chromium's document inspector, I can clearly see that the li element's background-color has been updated correctly, but they're not being rendered. What's funny, is it will go ahead and render the DOM changes after I hover my my cursor over the unrendered html element in Chrom's document inspector!

How should I fix this?

解决方案

I figured it out. Chrom has a rendering bug.

If you call a window scroll function, immediately after you update some DOM properties, Chrom won't fully render all your DOM modifications.

To fix the problem, I replace this line:

window.scroll(0,docPos);

With this line:

setTimeout('window.scroll(0,' + docPos + ')',1);

This gives Chrom the ability to render the dom changes before the window-scroll-rendering bug can stop it.

这篇关于Chrome Bug - window.scroll方法拦截DOM渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！