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

Mac용 Chrome에서 DOM 다시 그리기를 강제하는 방법

웹 개발 시 브라우저에서 DOM 다시 그리기를 강제로 다시 그리거나 새로 고쳐야 하는 경우가 있습니다. DOM(문서 개체 모델). 대부분의 브라우저에서 작동하는 다양한 접근 방식이 있지만 Mac용 Chrome은 독특한 문제를 제기합니다.

사용하지 않는 CSS 속성을 수정하고 요소 차원을 쿼리한 다음 변경 사항을 되돌리는 표준 기술은 더 이상 브라우저에서 작동하지 않습니다. 맥용 크롬. 이 동작은 offsetHeight 속성을 검색할 때 다시 그리기를 방지하는 최적화로 인해 발생합니다.

이 제한을 극복하려면 보다 침입적인 방법을 사용할 수 있습니다.

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

이 방법은 다시 그리면 요소 위치에 눈에 띄는 점프가 발생하여 바람직하지 않을 수도 있습니다. 다시 그리기를 보장하는 보다 미묘한 접근 방식은 다음과 같습니다.

$('#parentOfElementToBeRedrawn').hide().show(0);

이는 상위 요소를 숨긴 다음 즉시 표시하여 리플로우를 강제합니다. 또는 일반 JavaScript에서:

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
}

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