有时我们必须强制浏览器重绘/回流以呈现某些状态。例如:
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>
“gradient_text”元素拒绝将其文本直观地更新为“bar”。在某些情况下,像这样触发同步重绘就足够了:
...
setTimeout(function(){
var elem = document.getElementById("gradient_text");
// sync force repaint 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_text" onload="update">
Foo
</p>
</div>
是什么导致浏览器引擎以这种方式运行?最感兴趣的是 Webkit/Blink。
最佳答案
根据我的评论,应该可以轻松地从任何浏览器进行测试:
我添加了一些 mix-blend-mode 效果,因此 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;
}
*/
/* 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>
关于javascript - 为什么这个重绘/回流 hack 有效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38086610/