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

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

Mac에서 Chrome을 사용하여 렌더링 문제가 발생하는 경우 최적화로 인해 다시 그리기를 트리거하는 기존 방법이 실패합니다. 브라우저에서 구현됩니다. 이 기사에서는 offsetHeight 속성에 의존하지 않고 강제로 다시 그리기 위해 상위 요소의 가시성 조작을 활용하는 대체 접근 방식을 살펴봅니다.

Common Hack for Redraw

다른 브라우저 조합에서 , 다음 해킹은 효과적으로 다시 그리기를 트리거합니다.

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

사용하지 않는 CSS 속성을 수정하여, 그런 다음 재계산을 강제하는 정보(예: 요소 높이)를 요청하고 최종적으로 원래 속성을 복원하면 다시 그리기가 이루어집니다.

Chrome/Mac 최적화

안타깝게도, Mac의 Chrome은 오프셋을 트리거하지 않고 offsetHeight를 검색하여 이 해킹을 우회합니다. redraw.

대체 Redraw Hack

Chrome/Mac에서 강제로 다시 그리기를 수행하려면 다음 솔루션이 제안됩니다.

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

이 방법은 요소의 테두리가 눈에 띄게 변경되어 브라우저가 강제로 다시 그려집니다. 테두리가 원래 상태로 돌아오기 전에 다시 그리기가 발생하도록 하려면 시간 초과가 필요합니다.

추가 옵션

다시 그리기를 강제하는 다른 방법은 다음과 같습니다.

• 다음을 사용하여 상위 요소 숨기기 및 숨기기 해제 jQuery:

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

• 빈 텍스트 노드를 요소에 삽입:

var forceRedraw = function(element) {
    ...
}

이 방법을 사용하면 CSS 조작 없이 보다 직접적으로 다시 그릴 수 있습니다.

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