집 > 기사 > 웹 프론트엔드 > CSS3 변환이 HTML 문서 흐름에 미치는 영향

CSS3 변환이 HTML 문서 흐름에 미치는 영향

高洛峰원래의: 2017-02-09 11:27:331726검색

html은 언제나 놀랍습니다

"Hardware Acceleration" 중에서

연초에 여가 시간에 정리한 메모입니다.

많은 온라인 기사에서는 브라우저의 하드웨어 가속을 켜면 페이지 렌더링 속도와 애니메이션 유창성을 향상시킬 수 있다고 제안합니다. 이는 많은 사람들의 페이지 제작에 거의 표준 구성이 되었습니다. 실제로 유용한지 여부에 관계없이 다음은 다음과 같습니다.

    html，body {
        transform: translate3d(0,0,0);
    }

그러나 많은 경우 HTML 수준에서 "이상"이 발생합니다. 문서 흐름.
W3C 사양에는 다음과 같은 설명이 있습니다.

HTML 네임스페이스에서 변환에 대한 없음 이외의 값은 스택 컨텍스트와 포함 블록을 모두 생성하게 됩니다.
객체는 고정된 위치의 하위 항목에 대한 포함 블록 역할을 합니다.

는 다음을 의미합니다.
HTML에서는 스택 객체이자 컨테이너 블록인 DOM을 변환하는 transform 것보다 더 많은 변환이 없습니다. .더 이상 의미가 없습니다.
이 유형의 객체는 positioned(주로 절대/고정) 하위 요소 컨테이너 역할도 합니다.

. . . 제 번역 능력에는 한계가 있어서, 이해하지 못하는 분들은 아래 문장을 읽으시면 더욱 혼란스러울 수 있습니다.

표준 문서 흐름

페이지의 DOM 요소는 HTML의 태그 위치 순서에 따라 위에서 아래로, 왼쪽에서 오른쪽으로 정렬됩니다.

이 기본 정의는 이미 다들 알고 계시리라 믿습니다. 그러나 이것이 실제로 어떻게 해석됩니까?

페이지에 display: inline-block 요소를 많이 배치하면 위->아래 왼쪽->오른쪽 깔끔하게 정리됩니다. 标准文档流의 기본 구현입니다.

문서 흐름에서 position, float 등의 속성을 사용하여 분리하면 또 다른 페이지 层级 개념이 생성됩니다. (너무 멀다...)

transform은 기본 위치 지정 속성을 변경합니다

예제 코드는 다음과 같습니다.

    <body>
        <header style="position: fixed; top: 0; width: 100%; background: red;">header</header>
        <p style="height: 2000px;"></p>
        <footer style="position: fixed; bottom: 0; width: 100%; background: blue;">footer</footer>
    </body>

예제를 보려면 클릭하세요

dom 요소의 기본 위치 지정 속성은 표준 문서 흐름의 표준 위치 지정 방법이기도 한 position: static;입니다.

예제에서는 p가 어떻게 위아래로 스크롤하더라도 머리글과 바닥글은 항상 화면의 위쪽과 아래쪽에 배치됩니다.

하지만 처음에 언급했듯이 body이나 html에 transform: translate3d(0,0,0);을 추가하고, 다시 시도해 보면 원본 position: fixed;의 두 요소가 더 이상 순종하지 않는다는 것을 알 수 있습니다. 화면이 스크롤되면서.

사실 position: fixed;의 참조 객체는 모두가 화면이라고 부르는 것이 아니라 viewport의 html 객체입니다. 일반적으로 페이지(document.documentElement)가 뷰포트를 생성합니다.

document.documentElement.clientHeight을 사용하면 fixed의 요소가 컨테이너로 배치되는 뷰포트의 실제 높이를 확인할 수 있습니다.

body(또는 html)에 transform 속성을 추가하면 전체 body DOM이 해당 변환을 거치게 되지만, 이때 "전체"는 본문 아래의 표준 문서 흐름 요소만 나타냅니다. 그런 분들을 위해 position: absolute; / position: fixed; 요소는 본문이 속한 문서 흐름과 분리되어 있으므로 본문의 변형에 의존하여 해당 변형 효과를 자연스럽게 얻을 수 없습니다.

이때 이러한 유형의 DOM을 변경하기 위해 브라우저는 새 뷰포트를 생성합니다. 이 뷰포트는 위치 지정 요소를 위한 컨테이너로 존재하며 transform 변환 효과에 응답합니다. 이를 통해 문서 흐름에서 벗어나는 내부 positioned 요소도 변형할 수 있습니다.

이 뷰포트는 position: fixed;의 위치에 심각한 영향을 미칩니다. "원본" 돔과 동시에 스크롤하면 fixed 요소와 함께 롤링되어 absolute과 같은 이상한 효과가 나타납니다. :

fixed 요소는 absolute과 같은 크기의 "보이지 않는" 컨테이너에 존재하는 document.documentElement이 되는 것 같습니다.

확장된 상황

일부 모바일 기기(또는 APP)에서는 하드 디코딩으로 <video> 태그 재생이 기본적으로 활성화되어 있는데, 이때 위와 같은 현상도 발생합니다. 그리고 비디오는 "부동"됩니다. "페이지에서는 페이지 요소와 함께 정상적으로 스크롤되지 않습니다.

일부 하위 버전의 모바일 브라우저에서도 비슷한 상황이 발생합니다. 이 아이디어에 따라 해결해 보세요.

요약

사실 위의 상황은 body에만 일어나는 것이 아니고, 어떤 돔이든 transform을 추가하면 뷰포트와 같은 효과를 낼 수 있습니다. 그것.

인용문:
http://www.php.cn/

html 언제나 놀랍습니다

"하드웨어 가속" 중에서

가짜 시간에 정리한 연초의 메모입니다.

많은 온라인 기사에서는 브라우저의 하드웨어 가속을 켜면 페이지 렌더링 속도와 애니메이션의 유창성이 향상될 것이라고 제안합니다. 이는 많은 사람들의 페이지 제작에 거의 표준 구성이 되었습니다. 실제로 유용한지 여부에 관계없이 다음은 다음과 같습니다.

    html，body {
        transform: translate3d(0,0,0);
    }