Mac의 Chrome에서 DOM을 강제로 새로 고치는 방법은 무엇입니까?

Mac용 Chrome에서 강제 DOM 새로 고침

유효한 HTML 및 CSS가 있음에도 불구하고 Mac의 Chrome은 때때로 요소를 올바르게 렌더링하지 못하거나 렌더링을 무시합니다. 완전히. 검사기를 통해 DOM을 검사하면 문제가 해결되는 경우가 많지만 Chrome이 의도적으로 다시 그리기를 방지하는 경우가 있습니다.

다른 브라우저-OS 조합에서 작동하는 일반적인 다시 그리기/새로 고침 해킹에는 사용되지 않는 CSS 속성을 수정하고 일부를 가져오는 작업이 포함됩니다. 정보를 사용하여 다시 그리기를 트리거한 다음 속성 변경을 되돌립니다.

그러나 이 방법은 Mac용 Chrome에서는 실패합니다. 더 복잡한 솔루션을 사용해야 했습니다.

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

이 방법을 사용하면 요소가 눈에 띄게 점프하여 다시 그려지게 됩니다. 그러나 시간 제한을 500ms 미만으로 줄이면 요소가 원래 상태로 돌아가기 전에 브라우저가 다시 그려져 효과가 무효화될 수 있습니다.

대체 다시 그리기 방법

또 다른 간단한 새로 고침 충분한 방법은 필요한 요소의 상위 컨테이너를 숨긴 다음 즉시 표시하는 것입니다. 다시 그리기.

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

// Plain 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
}

이렇게 하면 Paul Irish가 설명한 대로 리플로우가 강제됩니다. http://paulirish.com/2011/dom-html5-css3-performance/

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