为什么这个重绘/回流黑客工作? [英] Why does this repaint/reflow hack work?
问题描述
有时我们必须强制重绘/回流浏览器来呈现某些状态。例如:
window.onload = function(){setTimeout ){document.getElementById(gradient_text)。innerHTML =bar;},500);}
#gradient_div {background:linear-gradient(#000000,#ffffff); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
< div id =gradient_div> < p id =gradient_textonload =update> Foo< / p>< / div>
< gradient_text元素,拒绝可视地将其文本更新为bar。在某些情况下,它足以触发同步重绘,如下所示:
...
setTimeout {
var elem = document.getElementById(gradient_text);
//同步力重绘hack
elem.innerHTML =bar;
elem.style.display =' none';
elem.style.display ='block';
},500);
...
但是,这不起作用。显然,它需要异步hack:
window.onload = function {setTimeout(function(){var elem = document.getElementById(gradient_text); elem.innerHTML =bar; // async force repaint hack var display = elem.style.display; elem.style.display ='none '; setTimeout(function(){elem.style.display = display},50);},500);}
#gradient_div {background:linear-gradient(#000000,#ffffff); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
< div id =gradient_div> < p id =gradient_textonload =update> Foo< / p>< / div>
浏览器引擎以这种方式表现?
从我的评论,应该可以很容易地从任何浏览器测试:
我添加了一些混合混合模式效果,所以Firefox应该渲染类似于Chrome在这里假设的东西。
window.onload = document.getElementById(gradient_text)。innerHTML =bar;
/ *#gradient_div {background:linear-gradient(#000000,#ffffff) ; -webkit-background-clip:text; -webkit-text-fill-color:transparent;} * // *更新以显示类似的文本填充效果在Firefox * /#gradient_div {background:linear-gradient(#000000,#ffffff);}#gradient_text {background:白色; mix-blend-mode:screen}
< div id =gradient_div> < p id =gradient_text> Foo< / p>< / div>
Sometimes we have to force repaint/reflow for the browser to render certain states. For instance:
window.onload = function () {
setTimeout(function(){
document.getElementById("gradient_text").innerHTML = "bar";
}, 500);
}
#gradient_div {
background: linear-gradient(#000000,#ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<div id="gradient_div">
<p id="gradient_text" onload="update">
Foo
</p>
</div>
The "gradient_text" element, refuses to visually update its text to "bar". In some cases, it's enough to trigger a synchronous repaint like so:
...
setTimeout(function(){
var elem = document.getElementById("gradient_text");
// sync force repaint hack
elem.innerHTML="bar";
elem.style.display = 'none';
elem.style.display = 'block';
}, 500);
...
However, this does not work. Apparently, it requires an asynchronous hack:
window.onload = function () {
setTimeout(function(){
var elem = document.getElementById("gradient_text");
elem.innerHTML = "bar";
// async force repaint hack
var display = elem.style.display;
elem.style.display = 'none';
setTimeout(function(){
elem.style.display = display
}, 50);
}, 500);
}
#gradient_div {
background: linear-gradient(#000000,#ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<div id="gradient_div">
<p id="gradient_text" onload="update">
Foo
</p>
</div>
What's causing the browser engine to behave this way? Mostly interested in Webkit/Blink.
From my comment, should make it easy to test from any browser :
I added some mix-blend-mode effect so Firefox should render something similar to what Chrome is suppose to here .
window.onload = document.getElementById("gradient_text").innerHTML = "bar";
/*#gradient_div {
background: linear-gradient(#000000,#ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
*/
/* UPDATE to show similar text-fill effect in Firefox */
#gradient_div {
background: linear-gradient(#000000,#ffffff);
}
#gradient_text {
background:white;
mix-blend-mode:screen
}
<div id="gradient_div">
<p id="gradient_text">
Foo
</p>
</div>
这篇关于为什么这个重绘/回流黑客工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!