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

Chrome/Mac에서 강제 DOM 다시 그리기: 렌더링 문제에 대한 솔루션

특정 상황에서 Mac의 Chrome은 마크업의 변경에도 불구하고 HTML/CSS를 올바르게 렌더링하지 못할 수 있습니다. 효력. 일반적인 해결 방법은 CSS 속성을 수정하고 offsetHeight를 검색하여 강제로 다시 그리는 것입니다. 그러나 이 방법은 더 이상 Chrome/Mac에서 효율적으로 작동하지 않습니다.

이 문제를 해결하기 위해 Chrome/Mac에서 작동하는 대체 접근 방식은 문제가 있는 요소의 테두리를 일시적으로 변경하는 것입니다.

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

이렇게 하면 요소의 위치가 강제로 변경되어 다시 그려집니다. 그러나 단점은 지연이 포함되어 시각적으로 방해가 될 수 있다는 것입니다.

더욱 안정적인 방법은 빈 텍스트 노드를 요소에 삽입하는 것입니다.

var forceRedraw = function(element){
    if (!element) { return; }
    var n = document.createTextNode(' ');
    var disp = element.style.display;
    element.appendChild(n);
    element.style.display = 'none';
    setTimeout(function(){
        element.style.display = disp;
        n.parentNode.removeChild(n);
    },20);
}

이 기술은 시각적인 점프 없이 다시 그릴 수 있습니다. 표시 속성을 수정하고 텍스트 노드를 삽입하면 DOM이 리플로우되고 요소가 정확하게 표시됩니다.

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