SVG 용 Chrome 사용자 에이전트 스타일 시트 * 선택기를 사용 중지 하시겠습니까?

Question

나는 크롬 (그들은 [개체 삽입, iframe을, 또는 인라인] 임베디드되는 방법에 관계없이) 모든 SVG 요소에 다음 CSS 규칙을 적용 최근에 발견 :

* { 
    -webkit-transform-origin-x: 0px; 
    -webkit-transform-origin-y: 0px; 
    -webkit-transform-origin-z: initial; 
} 

는 CSS 셀렉터 프로파일 러 실행하기 * selector가 훨씬 큰 성과를 거두었습니다. 이것은 스크롤링 등이 페이지의 여러 매우 복잡한 SVG에서 느리게 느껴지도록합니다.

내 질문은이 문제를 어떻게 해결할 수 있습니까? 이 규칙을 삭제할 수있는 방법이 있습니까 (이 경우에는 선택기 성능이 이 악화 될 수 있으므로 재정의하지 마십시오.)?

아마도이는 크롬 팀에 의해 감독이었다, 또는 어쩌면 내가 이해하지 못하는 이유가있다 (또한 설명 할 수있는 사람에게 보너스 포인트가 거기에 내가 틀렸다면이 사라하려는 이유) .

아마도 프로파일 러를 잘못 읽고 있습니다. 다음은 스크린 샷입니다 (관련없는 셀렉터가 제거됨).

나는 내가 여기에 질문을 많이 부탁 해요 알고 있지만 "소스"열이 채워지지 않은 이유는 (단순히 아직 구현되지 않은 이외의)가있다?

Answer 1

프로필에 나열된 특정 규칙에 대한 소스 파일이 없기 때문에 Source 열이 채워지지 않습니다. 이것은 사용자 에이전트 스타일 시트에있는 규칙 때문입니다. 이는 Chrome 코드에 일종의 "하드 코드 된"것으로 실제 자원과 일치하지 않습니다.

이제 절대 시간 (프로필보기 아래의 상태 표시 줄에있는 % 단추)으로 전환하고 실제로 걸리는 시간을 밀리 초 단위로보십시오. HTML5 사양을 단일 페이지로보고 있지 않는 한 놀라게 될 것입니다.

는 지금까지 내가 아는 한, -webkit-transform-origin 전체 페이지에 대한 하드웨어 가속 합성을 적용하려면이 방법을 사용한다.

Answer 2

당신은 적어도 XHTML의 네임 스페이스 ("정상적인"HTML에 대한 확실하지)를 사용하여 HTML로 규칙을 제한 할 수 있습니다

@namespace html 'http://www.w3.org/1999/xhtml' 
html|* { 
    -webkit-transform-origin-x: 0px; 
    -webkit-transform-origin-y: 0px; 
    -webkit-transform-origin-z: initial; 
} 

이 (Tinkerbin에 또 다른 예를 비교). 일을해야 SVG 네임 스페이스와 not() 선택기를 사용하여 "정상적인"HTML, 들어

:

@namespace svg 'http://www.w3.org/2000/svg'; 
*:not(svg|*) { 
    -webkit-transform-origin-x: 0px; 
    -webkit-transform-origin-y: 0px; 
    -webkit-transform-origin-z: initial; 
} 

나는이 성능을 향상시킬 것인지,하지만 확실하지 않다.