Принудительная перерисовка / обновление DOM на Chrome / Mac

Question

Время от времени Chrome отображает совершенно корректный HTML / CSS неправильно или не отображает его вообще. Копания через инспектора DOM часто достаточно, чтобы заставить его осознать ошибку своих путей и правильно перерисовать, поэтому вполне вероятно, что разметка хорошая. Это происходит достаточно часто (и, как и ожидалось, достаточно) в проекте, над которым я работаю, и я поместил код на место, чтобы вызвать перерисовку при определенных обстоятельствах.

Это работает в большинстве комбинаций браузер / операционная система:

    el.style.cssText += ';-webkit-transform:rotateZ(0deg)'
    el.offsetHeight
    el.style.cssText += ';-webkit-transform:none'

Например, настройте неиспользуемое свойство CSS, затем запросите информацию, которая вызывает перерисовку, а затем отмените свойство. К сожалению, яркая команда Chrome для Mac, похоже, нашла способ получить это offsetHeight без перерисовки. Таким образом убивая полезного в противном случае взломать.

Пока что лучшее, что я придумал, чтобы получить тот же эффект на Chrome / Mac, это уродство:

    $(el).css("border", "solid 1px transparent");
    setTimeout(function()
    {
        $(el).css("border", "solid 0px transparent");
    }, 1000);

Как в действительности, заставить элемент немного подскочить, затем охладить секунду и отскочить назад. Хуже того, если вы сократите этот тайм-аут ниже 500 мс (туда, где он будет менее заметен), он часто не будет иметь желаемого эффекта, так как браузер не дойдет до перерисовки, пока не вернется в исходное состояние.

Кто-нибудь хочет предложить лучшую версию этого хака для перерисовки / обновления (предпочтительно на основе первого примера выше), который работает на Chrome / Mac?

Answer 1

Мое исправление для IE10 + IE11.По сути, происходит добавление DIV в элемент-обертку, который необходимо пересчитать.Тогда просто удали его и вуаля;работает как шарм:)

    _initForceBrowserRepaint: function() {
        $('#wrapper').append('<div style="width=100%" id="dummydiv"></div>');
        $('#dummydiv').width(function() { return $(this).width() - 1; }).width(function() { return $(this).width() + 1; });
        $('#dummydiv').remove();
    },