WebKit이 스타일을 자동으로 업데이트하지 않는 이유는 무엇이며 강제로 다시 칠하려면 어떻게 해야 합니까?

WebKit에서 스타일 업데이트 강제

JavaScript를 통해 적용된 스타일 변경이 영향을 받는 모든 요소에 전파되지 않는 문제에 직면해 있습니다. Chrome 및 Safari와 같은 WebKit 기반 브라우저. 이는 여러 요소가 포커스가 있거나 링크와 같은 대화형 요소를 포함하는 하위 항목이 있는 공통 조상으로부터 스타일을 상속하는 경우에 나타날 수 있습니다.

WebKit의 무응답

WebKit은 그렇지 않습니다. 상속된 스타일에 대한 업데이트를 받으면 자동으로 다시 칠해집니다. 이는 이러한 변경 사항을 더 원활하게 처리하는 Firefox, Opera 및 IE와 같은 다른 브라우저와 대조됩니다.

Nudging을 통해 강제로 다시 그리기

WebKit이 업데이트되지 않기 때문입니다. 스타일을 자동으로 적용하려면 페이지의 요소를 약간만 변경하여 강제로 다시 칠할 수 있습니다. Chrome 개발자 도구에서는 임의 요소의 속성을 선택 취소했다가 다시 선택해도 올바른 스타일 업데이트가 실행되는 것을 확인했습니다.

제안된 솔루션

프로그래밍 방식으로 강제로 다시 그리기 , 다음 기술을 사용할 수 있습니다.

sel.style.display = 'none';
sel.offsetHeight; // no need to store this anywhere, just referencing it is sufficient
sel.style.display = '';

이 접근 방식에는 요소를 일시적으로 숨겼다가 숨기기 해제하는 작업이 포함됩니다. offsetHeight 줄은 브라우저가 실제로 변경 사항을 적용하는지 확인합니다. 반환되는 높이를 저장할 필요가 없습니다.

잠재적 제한

제공된 솔루션은 "블록" 표시가 있는 요소에 작동하는 것으로 확인되었습니다. 다른 표시 모드를 사용하면 요소에 대해 다른 동작이 나타날 수 있지만 이에 대해서는 추가 조사가 필요합니다.

위 내용은 WebKit이 스타일을 자동으로 업데이트하지 않는 이유는 무엇이며 강제로 다시 칠하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!