除了IE之外，JS字体大小调整在浏览器中不能逐步调整

Question

我正在调整javascript中的字体大小，直到它淹没了它所在的div。我这样做是因为网站的布局不稳定，因此div的大小发生了变化，我希望匹配字体相应

这是一个简单的循环：

    while (!overflow(div)) {
        fontSize += 1;
        div.css("font-size", fontSize + "%");
    }

奇怪的是，只有IE才能正确完成。

Chrome，Firefox和Opera不会线性调整字体大小，但会以不规则的间隔进行调整。

E.g。 Chrome只会将字体大小调整为108％，120％和129％，似乎忽略了中间的所有值。 Moz和Opera有自己的间隔（较小的间隔），所以要弄清楚那里发生的事情并不容易。

有人有个主意吗？

Answer 1

基于WebKit的浏览器和Firefox经过优化，可以错开并批量更新DOM，从而提高整体页面呈现效率。这个想法是对DOM的多个连续更新很少需要单独的渲染，但最后只需要一个渲染。但是，还有一种触发渲染的方法。只需调用一个强制浏览器重新布局页面的getter。

o = div.offsetWidth;

在设置样式属性后，在循环内添加它会在每次迭代时触发渲染。

所有方法和getter属性中有a list触发了Google工程师Tony Gentilcore博客在WebKit中的重新布局。