Как заставить WebKit перерисовать / перекрасить для распространения изменений стиля?
У меня есть несколько тривиальных JavaScript для изменения стиля:
sel = document.getElementById('my_id');
sel.className = sel.className.replace(/item-[1-9]-selected/,'item-1-selected');
return false;
Это прекрасно работает с последними версиями FF, Opera и IE, но не работает на последних версиях Chrome и Safari.
Это затрагивает двух потомков, которые, случается, являются родными братьями. Первый брат обновляется, а второй нет. Дочерний элемент второго элемента также имеет фокус и содержит тег , содержащий вышеуказанный код в атрибуте onclick.
Есть ли обходной путь, позволяющий легко и программно "подтолкнуть" WebKit на правильные действия?
33 ответа
Я хотел бы добавить, что стиль теперь нужно установить на родительском узле .
sel.parentNode.style.display = 'none';
sel.parentNode.offsetHeight;
sel.parentNode.style.display = '';
Это единственное решение, которое сработало для меня в текущей версии Safari (15.6).
Простое решение с помощью jquery:
$el.html($el.html());
или же
element.innerHTML = element.innerHTML;
Был SVG, который не отображался, когда он был добавлен в HTML.
Это можно добавить после того, как элементы svg появятся на экране.
Лучшее решение - использовать:
document.createElementNS('http://www.w3.org/2000/svg', 'svg');
и с помощью jQuery:
$(svgDiv).append($(document.createElementNS('http://www.w3.org/2000/svg', 'g'));
это будет правильно отображаться на Chrome.
Это приведет к принудительной перерисовке, избегая мерцания, переделки существующих элементов и любых проблем с макетом...
function forceRepaint() {
requestAnimationFrame(()=>{
const e=document.createElement('DIV');
e.style='position:fixed;top:0;left:0;bottom:0;right:0;background:#80808001;\
pointer-events:none;z-index:9999999';
document.body.appendChild(e);
requestAnimationFrame(()=>e.remove());
});
}