macOS의 Chrome에서 DOM 다시 그리기를 강제하는 방법은 무엇입니까?

Chrome/Mac에서 강제 DOM 다시 그리기

이 문제는 Mac 기기의 Chrome이 유효한 HTML/CSS 요소를 잘못 렌더링할 때 발생합니다. DOM을 검사하면 올바른 다시 그리기가 실행되는 경우가 많지만, offsetHeight가 다시 그리기를 실행하지 못하게 하는 최적화로 인해 Chrome/Mac에서는 이 해킹이 실패합니다.

다음 해킹은 해결 방법입니다.

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

이렇게 하면 요소가 약간 점프하게 되어 다시 그리기가 트리거됩니다. 그러나 지연이 눈에 띕니다.

대안은 이 방법을 대신 사용하는 것입니다.

$('#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
}

이것은 기술은 본질적으로 리플로우를 강제하여 레이아웃을 업데이트하고 다시 그리기를 트리거합니다.

위 내용은 macOS의 Chrome에서 DOM 다시 그리기를 강제하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!