JS font-resize не работает постепенно в браузерах, кроме IE

Question

Я изменяю размер шрифта в javascript до тех пор, пока он не заполнит div, в котором он находится. Я делаю это, потому что макет сайта плавный и, следовательно, размер div изменяется, и я хочу соответствующим образом подобрать шрифт.

Это простой цикл:

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

Любопытно, что только IE делает это правильно.

Chrome, Firefox и Opera не регулируют размер шрифта линейно, но с нерегулярными интервалами.

например. Chrome отрегулирует только размер шрифта на 108%, 120% и 129%, по-видимому игнорируя все значения между ними. У Moz и Opera есть свои собственные интервалы (меньшие), поэтому непросто понять, что там происходит.

Кто-нибудь получил идею?

Answer 1

Браузеры на базе WebKit и Firefox оптимизированы для поэтапного и пакетного обновления DOM, чтобы повысить эффективность рендеринга страниц в целом. Идея состоит в том, что множественные непрерывные обновления DOM редко требуют отдельного рендеринга, а только один рендеринг в конце. Тем не менее, есть способ запустить рендер. Просто вызовите геттер, который заставит браузер изменить макет страницы.

o = div.offsetWidth;

Добавление этого в вашем цикле после установки свойства стиля будет вызывать рендеринг с каждой итерацией.

Есть список всех методов и свойств получателя, которые вызывают изменение макета в WebKit в блоге инженера Google Тони Джентилкора.