Примушуйте DOM перемальовувати / оновлювати на Chrome / Mac

Раз у раз Chrome буде виводити ідеально правильний HTML / CSS неправильно або зовсім не. Копатися через інспектора DOM досить часто, щоб він зрозумів помилку своїх шляхів і правильно перемальовував, тому, очевидно, випадок, що розмітка хороша. Це трапляється досить часто (і передбачувано) в проекті, над яким я працюю, і я поставив код, щоб змусити перемальовувати певні обставини.

Це працює в більшості комбінацій браузера / os:

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

Як і в, перегляньте деякі невикористані властивості CSS, потім запитайте інформацію, яка змушує перемальовувати, а потім зніміть властивість. На жаль, схоже, що яскрава команда, що стоїть за Chrome для Mac, знайшла спосіб вирівняти висоту без перемальовки. Таким чином вбиваючи інакше корисний хак.

Поки що найкраще, що я придумав, щоб досягти такого ж ефекту на Chrome / Mac, це ця потворність:

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

Як і в, насправді змушуйте елемент трохи стрибнути, а потім охолодити секунду і відскочити назад. Що ще гірше, якщо цей час очікується нижче 500 мс (туди, де це буде менш помітно), він часто не матиме бажаного ефекту, оскільки браузер не перейде до перемальовування, перш ніж повернеться до початкового стану.

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

Не впевнений, чого саме ви намагаєтеся досягти, але це метод, який я раніше використовував з успіхом, щоб змусити браузер перемальовуватися, можливо, це допоможе вам.

// in jquery
$('#parentOfElementToBeRedrawn').hide().show(0);

// in plain js
document.getElementById('parentOfElementToBeRedrawn').style.display = 'none';
document.getElementById('parentOfElementToBeRedrawn').style.display = 'block';

Якщо ця проста перемальовка не працює, ви можете спробувати цю. Він вставляє порожній текстовий вузол в елемент, який гарантує перемальовку.

var forceRedraw = function(element){

    if (!element) { return; }

    var n = document.createTextNode(' ');
    var disp = element.style.display;  // don't worry about previous display style

    element.appendChild(n);
    element.style.display = 'none';

    setTimeout(function(){
        element.style.display = disp;
        n.parentNode.removeChild(n);
    },20); // you can play with this timeout to make it as short as possible
}

EDIT: У відповідь на Šime Vidas, що ми досягаємо тут, було б вимушеним відливом. Ви можете дізнатися більше від самого майстра http://paulirish.com/2011/dom-html5-css3-performance/

Жодна з наведених відповідей не працювала для мене. Я помітив, що зміна розміру вікна викликала перемальовування. Так це зробило для мене:

$(window).trigger('resize');

Нещодавно ми стикалися з цим і виявили, що просування постраждалого елемента до складеного шару з translateZ виправило проблему, не потребуючи додаткового JavaScript.

.willnotrender { 
   transform: translateZ(0); 
}

Оскільки ці проблеми з фарбуванням виявляються в основному в Webkit / Blink, і це виправлення в основному націлено на Webkit / Blink, в деяких випадках краще. Тим більше, що багато рішень JavaScript викликають повторне перефарбування , а не просто перефарбовування.

Це рішення без тайм-аутів! Справжня сила перемальовується! Для Android та iOS.

var forceRedraw = function(element){
  var disp = element.style.display;
  element.style.display = 'none';
  var trick = element.offsetHeight;
  element.style.display = disp;
};

Це працює для мене. Кудосі йдуть сюди .

jQuery.fn.redraw = function() {
    return this.hide(0, function() {
        $(this).show();
    });
};

$(el).redraw();

Якщо приховати елемент, а потім знову показати його протягом setTimeout 0, примусить перемальовуватися.

$('#page').hide();
setTimeout(function() {
    $('#page').show();
}, 0);

Це, здається, робить для мене трюк. Плюс, це насправді зовсім не показується.

$(el).css("opacity", .99);
setTimeout(function(){
   $(el).css("opacity", 1);
},20);

виклик window.getComputedStyle()повинен примусити перезавантажити

Я зіткнувся з цим викликом сьогодні в OSX El Capitan з Chrome v51. Сторінка, про яку йдеться, справно працювала в Safari. Я спробував майже кожну пропозицію на цій сторінці - жодна не працювала правильно - всі мали побічні ефекти ... Я в кінцевому підсумку реалізував код нижче - супер простий - жодних побічних ефектів (як і раніше, як і раніше в Safari).

Рішення: Перемістіть клас на проблемний елемент за потребою. Кожен перемикач примусить перемальовувати. (Я використовував jQuery для зручності, але ванільний JavaScript не повинен бути проблемою ...)

jQuery Класс переключення

$('.slide.force').toggleClass('force-redraw');

Клас CSS

.force-redraw::before { content: "" }

І це все...

ПРИМІТКА. Щоб побачити ефект, вам слід запустити фрагмент під "Повною сторінкою".

$(window).resize(function() {
  $('.slide.force').toggleClass('force-redraw');
});

.force-redraw::before {
  content: "";
}
html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.slide-container {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  padding-left: 10%;
  padding-right: 5%;
}
.slide {
  position: relative;
  display: inline-block;
  height: 30%;
  border: 1px solid green;
}
.slide-sizer {
  height: 160%;
  pointer-events: none;
  //border: 1px solid red;

}
.slide-contents {
  position: absolute;
  top: 10%;
  left: 10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  This sample code is a simple style-based solution to maintain aspect ratio of an element based on a dynamic height.  As you increase and decrease the window height, the elements should follow and the width should follow in turn to maintain the aspect ratio.  You will notice that in Chrome on OSX (at least), the "Not Forced" element does not maintain a proper ratio.
</p>
<div class="slide-container">
  <div class="slide">
    <img class="slide-sizer" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
    <div class="slide-contents">
      Not Forced
    </div>
  </div>
  <div class="slide force">
    <img class="slide-sizer" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
    <div class="slide-contents">
      Forced
    </div>
  </div>
</div>

function resizeWindow(){
    var evt = document.createEvent('UIEvents');
    evt.initUIEvent('resize', true, false,window,0);
    window.dispatchEvent(evt); 
}

викликати цю функцію через 500 мілісекунд.

Якщо ви хочете зберегти стилі, задекларовані у своїх таблицях стилів, краще скористайтеся чимось на зразок:

jQuery.fn.redraw = function() {
    this.css('display', 'none'); 
    var temp = this[0].offsetHeight;
    this.css('display', '');
    temp = this[0].offsetHeight;
};

$('.layer-to-repaint').redraw();

Примітка: за допомогою останнього webkit / blink зберігання значення offsetHeightє обов'язковим для того, щоб викликати перефарбування, інакше VM (для оптимізації), ймовірно, пропустить цю інструкцію.

Оновлення: додано друге offsetHeightчитання, потрібно запобігти перегляду в чергу / кешування наступних змін властивостей / класів CSS із відновленням displayзначення (таким чином повинен бути наданий перехід CSS, який може слідувати)

Зразок Html:

<section id="parent">
  <article class="child"></article>
  <article class="child"></article>
</section>

Js:

  jQuery.fn.redraw = function() {
        return this.hide(0,function() {$(this).show(100);});
        // hide immediately and show with 100ms duration

    };

функція виклику:

$('article.child').redraw(); // <== погана ідея

$('#parent').redraw();

Підхід, який працював на мене на IE (я не міг використовувати техніку відображення, оскільки був вхід, який не повинен втрачати фокус)

Він працює, якщо у вас 0 запасів (також змінюється прокладка)

if(div.style.marginLeft == '0px'){
    div.style.marginLeft = '';
    div.style.marginRight = '0px';
} else {
    div.style.marginLeft = '0px';
    div.style.marginRight = '';
}

Тільки CSS Це працює в ситуаціях, коли дочірній елемент видаляється або додається. У цих ситуаціях межі та закруглені кути можуть залишати артефакти.

el:after { content: " "; }
el:before { content: " "; }

Моє виправлення для 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();
    },

Більшість відповідей вимагає використання асинхронного тайм-ауту, який викликає дратівливе миготіння.

Але я придумав цей, який працює безперебійно, оскільки він є синхронним:

var p = el.parentNode,
    s = el.nextSibling;
p.removeChild(el);
p.insertBefore(el, s);

Це моє рішення, яке працювало на зникнення контенту ...

<script type = 'text/javascript'>
    var trash_div;

    setInterval(function()
    {
        if (document.body)
        {
            if (!trash_div)
                trash_div = document.createElement('div');

            document.body.appendChild(trash_div);
            document.body.removeChild(trash_div);
        }
    }, 1000 / 25); //25 fps...
</script>

Я зіткнувся з подібною проблемою, і ця проста лінія JS допомогла виправити це:

document.getElementsByTagName('body')[0].focus();

У моєму випадку це була помилка з розширенням Chrome, яка не перемальовувала сторінку після зміни CSS зсередини розширення.

Я хотів повернути всі стани до попереднього стану (без перезавантаження), включаючи елементи, додані jquery. Вищезазначена реалізація не працює. і я зробив так.

// Set initial HTML description
var defaultHTML;
function DefaultSave() {
  defaultHTML = document.body.innerHTML;
}
// Restore HTML description to initial state
function HTMLRestore() {
  document.body.innerHTML = defaultHTML;
}



DefaultSave()
<input type="button" value="Restore" onclick="HTMLRestore()">

У мене був список компонентів реагування, який, коли прокручувався, потім відкривав іншу сторінку, потім, коли повертався назад, список не виводився на Safari iOS, поки сторінка не прокручувалася. Так це виправлення.

    componentDidMount() {
        setTimeout(() => {
            window.scrollBy(0, 0);
        }, 300);
    }

Нижче css працює для мене в IE 11 і Edge, JS не потрібен. scaleY(1)робить трюк тут. Здається, найпростіше рішення.

.box {
    max-height: 360px;
    transition: all 0.3s ease-out;
    transform: scaleY(1);
}
.box.collapse {
    max-height: 0;
}

Це мені допомогло

domNodeToRerender.style.opacity = 0.99;
setTimeout(() => { domNodeToRerender.style.opacity = '' }, 0);

2020: легше і сильніше

Попередні рішення для мене більше не працюють.

Я думаю, що браузери оптимізують процес малювання, виявляючи все більше і більше "марних" змін.

Це рішення змушує браузер намалювати клон для заміни початкового елемента. Він працює і, ймовірно, більш стійкий:

const element = document.querySelector('selector');
if (element ) {
  const clone = element.cloneNode(true);
  element.replaceWith(clone);
}

перевірено на Chrome 80 / Edge 80 / Firefox 75