html It's always so surprising
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 blocktransformTransformation is even more meaningless.
This type of object also plays the role ofpositioned(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.
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 ofdisplay: inline-blockelements on the page, they will behave very nicelyUp-> BottomLeft- > Rightis arranged neatly. This is the basic embodiment ofStandard Document Flow.
When you useposition,floatand other attributes to separate it from the document flow, another concept of pagelevelwill be generated. (I’m going too far...)
The example code is as follows:
header
Click to view the example
Default positioning of the dom element The attribute isposition: 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 atransform: translate3d(0,0,0);tobodyorhtml, you If you try again, you will find that the two elements originallyposition: fixed;are no longer obedient and will scroll with the screen.
Actually, the reference object ofposition: fixed;is not what everyone calls the screen, but aviewporthtml object, generally a page (document.documentElement) will generate a viewport.
You can usedocument.documentElement.clientHeightto see the actual height of the viewport, in whichfixedelements are positioned using this as the container. After adding the
attribute tobody (or html), the entirebodyDOM will undergo corresponding transformations, but the "whole" at this time only refers to the body Under the standard document flow elements, for thoseposition: 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 thetransformtransformation effect of the body. , so that thosepositionedelements that are out of the document flow can also be transformed.
This viewport will seriously affect the positioning ofposition: fixed;. When it scrolls synchronously with the "self" dom, it will roll with thefixedelement. , a strange effect similar toabsolutewill be produced: the
fixedelement seems to becomeabsolute, existing between a anddocument.documentElementIn an "invisible" container of the same size.
On some mobile devices (or APPs), the playback of thetag 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.
In fact, the above situation will not only happen tobody, any dom will produce a viewport-like viewport after addingtransformIf you are interested, you can try it.
Quote:
//m.sbmmt.com/
html Always so amazing
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 blocktransformTransformation is even more meaningless.
This type of object also plays the role ofpositioned(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.
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 ofdisplay: inline-blockelements on the page, they will behave very nicelyUp-> BottomLeft- > Rightis arranged neatly. This is the basic embodiment ofStandard Document Flow.
When you useposition,floatand other attributes to separate it from the document flow, another concept of pagelevelwill be generated. (I’m going too far...)
The example code is as follows:
header
Click to view the example
Default positioning of the dom element The attribute isposition: 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 atransform: translate3d(0,0,0);tobodyorhtml, you If you try again, you will find that the two elements originallyposition: fixed;are no longer obedient and will scroll with the screen.
Actually, the reference object ofposition: fixed;is not what everyone calls the screen, but aviewporthtml object, generally a page (document.documentElement) will generate a viewport.
You can usedocument.documentElement.clientHeightto see the actual height of the viewport, in whichfixedelements are positioned using this as the container. After adding the
attribute tobody (or html), the entirebodyDOM will undergo corresponding transformations, but the "whole" at this time only refers to the body Under the standard document flow elements, for thoseposition: 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 thetransformtransformation effect of the body. , so that thosepositionedelements that are out of the document flow can also be transformed.
This viewport will seriously affect the positioning ofposition: fixed;. When it scrolls synchronously with the "self" dom, it will roll with thefixedelement. , a strange effect similar toabsolutewill be produced: the
fixedelement seems to becomeabsolute, existing between a anddocument.documentElementIn an "invisible" container of the same size.
On some mobile devices (or APPs), the playback of thetag 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.
In fact, the above situation will not only happen tobody, any dom will produce a viewport-like viewport after addingtransformIf 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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
