The impact of CSS3 transform on HTML document flow

html It's always so surprising

Comes from "Hardware Acceleration"

A note from the beginning of the year, compiled in my spare time.

Many online articles suggest turning on the hardware acceleration of the browser, so that the page rendering speed and animation fluency will be improved. This has almost become a standard configuration for many people's page production, regardless of whether it is actually useful or not:

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

But in many cases it will cause "abnormalities" in the html-level document flow.
The W3C spec has the following description:

In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block.
The object acts as a containing block for fixed positioned descendants.

means:
In HTML, there is no comparison to a DOM that is both a stacked object and a container blocktransform Transformation is even more meaningless.
This type of object also plays the role of positioned (mainly absolute/fixed) descendant element container.

. . . My translation ability is limited, and those who don’t understand it may be even more confused after reading this sentence. Details below.

Standard document flow

The DOM elements in the page are arranged from top to bottom and from left to right according to the order of their tag positions in HTML

I believe everyone is already familiar with this basic definition. But how does this translate into practice?

If you place a lot of display: inline-block elements on the page, they will behave very nicely Up-> Bottom Left- > Right is arranged neatly. This is the basic embodiment of Standard Document Flow.

When you use position, float and other attributes to separate it from the document flow, another concept of page level will be generated. (I’m going too far...)

transform changes the default positioning attribute

The example code is as follows:

    
        <header>header</header>
        <p></p>
        <footer>footer</footer>
    

Click to view the example

Default positioning of the dom element The attribute is position: static; This is also the standard positioning method of the standard document flow.

In the example, no matter how p scrolls up and down, the header and footer will always be placed at the top and bottom of the screen.

But as originally mentioned, add a transform: translate3d(0,0,0); to body or html, you If you try again, you will find that the two elements originally position: fixed; are no longer obedient and will scroll with the screen.

Actually, the reference object of position: fixed; is not what everyone calls the screen, but a viewport html object, generally a page (document.documentElement) will generate a viewport.

You can use document.documentElement.clientHeight to see the actual height of the viewport, in which fixed elements are positioned using this as the container. After adding the

transform

attribute to body (or html), the entire body DOM will undergo corresponding transformations, but the "whole" at this time only refers to the body Under the standard document flow elements, for those position: absolute; / position: fixed; elements, because they have been separated from the document flow to which the body belongs, they cannot rely on the transformation of the body to make themselves Naturally achieve the corresponding transformation effect.

At this time, in order to make corresponding changes to this type of DOM, the browser will generate a new viewport. This viewport exists as a container for positioning elements and will respond to the transform transformation effect of the body. , so that those positioned elements that are out of the document flow can also be transformed.

This viewport will seriously affect the positioning of position: fixed;. When it scrolls synchronously with the "self" dom, it will roll with the fixed element. , a strange effect similar to absolute will be produced: the

fixed element seems to become absolute, existing between a and document.documentElementIn an "invisible" container of the same size.

Extended Situation

On some mobile devices (or APPs), the playback of the <video></video> tag is enabled by default and hard decoding will also occur at this time. Due to the above phenomenon, the video will "float" on the page and will not scroll normally with the page elements.

A similar situation will also occur on some low-version mobile browsers. You can try to solve it according to this idea.

Summary

In fact, the above situation will not only happen to body, any dom will produce a viewport-like viewport after adding transform If you are interested, you can try it.

Quote:
http://www.php.cn/

html Always so amazing

From "Hardware Acceleration"

A note from the beginning of the year, compiled in my spare time.

Many online articles suggest turning on the hardware acceleration of the browser, so that the page rendering speed and animation fluency will be improved. This has almost become a standard configuration for many people's page production, regardless of whether it is actually useful or not:

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

But in many cases it will cause "abnormalities" in the html-level document flow.
The W3C spec has the following description:

In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block.
The object acts as a containing block for fixed positioned descendants.

means:
In HTML, there is no comparison to a DOM that is both a stacked object and a container blocktransform Transformation is even more meaningless.
This type of object also plays the role of positioned (mainly absolute/fixed) descendant element container.

. . . My translation ability is limited, and those who don’t understand it may be even more confused after reading this sentence. Details below.

Standard document flow

The DOM elements in the page are arranged from top to bottom and from left to right according to the order of their tag positions in HTML

I believe everyone is already familiar with this basic definition. But how does this translate into practice?

If you place a lot of display: inline-block elements on the page, they will behave very nicely Up-> Bottom Left- > Right is arranged neatly. This is the basic embodiment of Standard Document Flow.

When you use position, float and other attributes to separate it from the document flow, another concept of page level will be generated. (I’m going too far...)

transform changes the default positioning attribute

The example code is as follows:

    
        <header>header</header>
        <p></p>
        <footer>footer</footer>
    

Click to view the example

Default positioning of the dom element The attribute is position: static; This is also the standard positioning method of the standard document flow.

In the example, no matter how p scrolls up and down, the header and footer will always be placed at the top and bottom of the screen.

But as originally mentioned, add a transform: translate3d(0,0,0); to body or html, you If you try again, you will find that the two elements originally position: fixed; are no longer obedient and will scroll with the screen.

Actually, the reference object of position: fixed; is not what everyone calls the screen, but a viewport html object, generally a page (document.documentElement) will generate a viewport.

You can use document.documentElement.clientHeight to see the actual height of the viewport, in which fixed elements are positioned using this as the container. After adding the

transform

attribute to body (or html), the entire body DOM will undergo corresponding transformations, but the "whole" at this time only refers to the body Under the standard document flow elements, for those position: absolute; / position: fixed; elements, because they have been separated from the document flow to which the body belongs, they cannot rely on the transformation of the body to make themselves Naturally achieve the corresponding transformation effect.

At this time, in order to make corresponding changes to this type of DOM, the browser will generate a new viewport. This viewport exists as a container for positioning elements and will respond to the transform transformation effect of the body. , so that those positioned elements that are out of the document flow can also be transformed.

This viewport will seriously affect the positioning of position: fixed;. When it scrolls synchronously with the "self" dom, it will roll with the fixed element. , a strange effect similar to absolute will be produced: the

fixed element seems to become absolute, existing between a and document.documentElementIn an "invisible" container of the same size.

Extended Situation

On some mobile devices (or APPs), the playback of the <video></video> tag is enabled by default and hard decoding will also occur at this time. Due to the above phenomenon, the video will "float" on the page and will not scroll normally with the page elements.

A similar situation will also occur on some low-version mobile browsers. You can try to solve it according to this idea.

Summary

In fact, the above situation will not only happen to body, any dom will produce a viewport-like viewport after adding transform If you are interested, you can try it.

For more related articles on the impact of CSS3 transform on HTML document flow, please pay attention to the PHP Chinese website!