HTML is always so amazing
From "Hardware Acceleration"
A note at the beginning of the year, sorted out at leisure.
Many online articles say that it is recommended to open the hardware acceleration of the browser, so that the page rendering speed, animation fluency will improve. This is almost a lot of people page production standard, tube is actually used to have one:
html,body { transform:translate3d (0,0,0); }
But this in many cases causes an "exception" to the HTML-level document flow.
The following description is available in the profile:
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 the fixed positioned descendants.
It means:
Within HTML, there is no more meaning to transform a DOM that is a cascading object and a container block transform
.
This type of object also acts positioned
as a container for descendants (mainly absolute/fixed).
。。。 The ability to translate is limited, people who do not understand the estimate of this sentence look more dizzy, the following details.
Standard document Flow
Dom elements in the page are arranged from top to bottom and left to right according to their label position in HTML
I suppose you are familiar with the definition of this foundation. But how does this actually manifest itself?
If you put a lot of elements in the page display: inline-block
, they will be very clever, and left-to- right row is very neat. This is 标准文档流
the basis of the embodiment.
When you use position
and float
wait for attributes to get out of the flow of a document, you create a page 层级
concept. (Pulling away ...)
Transform changing the location default property
The example code is as follows:
<body>
Click to view examples
The default positioning property for DOM elements is position: static;
This is also the standard way to locate a standard document flow.
In the example, the header and footer are always placed at the top and bottom of the screen, regardless of how p scrolls up or down.
But as originally stated, give body
or html
add one transform: translate3d(0,0,0);
, you try again, you will find that the original position: fixed;
two elements are not obedient, will be scrolling along with the screen.
In fact, position: fixed;
the reference object is not what you call a screen, but an viewport
HTML object, typically a page ( document.documentElement
) generates a viewport.
You document.documentElement.clientHeight
can see the actual height of the viewport, where fixed
the elements are positioned as containers.
After the body (or HTML) adds transform
attributes, the entire body
DOM produces a corresponding transformation, but at this point the "whole" only refers to the body under the standard document flow element, for those position: absolute;
/ position: fixed;
elements, because it has been separated from the body of the document flow, so Cannot rely on the body's transformation to make oneself also naturally achieves the corresponding transformation effect.
At this point, the browser in order for such a DOM to get a corresponding change, will produce a new viewport, the viewport as a container for positioning elements exist, will respond to the body of the transform
transformation effect, so that those outside the document flow of the positioned
elements can also be transformed.
This viewport will seriously affect position: fixed;
the location, when it scrolls with the "Buddha" Dom synchronously, it will roll with fixed
elements, this will produce a similar absolute
strange effect:
fixed
Elements appear to be in absolute
a document.documentElement
"invisible" container that is consistent with size.
Extended situation
In some mobile devices (or apps), to the <video>
default playback of the label to open the hard decoding, this will also produce the above phenomenon, the video will "float" on the page, will not be normal scrolling with the page elements.
There are also some lower version of the mobile browser, there will be similar situation, you can try to solve this idea.
Summarize
In fact, the above situation will not only happen body
, an arbitrary DOM added transform
will produce a similar viewport effect, interested in trying to.
Reference:
http://www.php.cn/
HTML is always so amazing
From "Hardware Acceleration"
A note at the beginning of the year, sorted out at leisure.
Many online articles say that it is recommended to open the hardware acceleration of the browser, so that the page rendering speed, animation fluency will improve. This is almost a lot of people page production standard, tube is actually used to have one:
html,body { transform:translate3d (0,0,0); }
But this in many cases causes an "exception" to the HTML-level document flow.
The following description is available in the profile:
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 the fixed positioned descendants.
It means:
Within HTML, there is no more meaning to transform a DOM that is a cascading object and a container block transform
.
This type of object also acts positioned
as a container for descendants (mainly absolute/fixed).
。。。 The ability to translate is limited, people who do not understand the estimate of this sentence look more dizzy, the following details.
Standard document Flow
Dom elements in the page are arranged from top to bottom and left to right according to their label position in HTML
I suppose you are familiar with the definition of this foundation. But how does this actually manifest itself?
If you put a lot of elements in the page display: inline-block
, they will be very clever, and left-to- right row is very neat. This is 标准文档流
the basis of the embodiment.
When you use position
and float
wait for attributes to get out of the flow of a document, you create a page 层级
concept. (Pulling away ...)
Transform changing the location default property
The example code is as follows:
<body>
Click to view examples
The default positioning property for DOM elements is position: static;
This is also the standard way to locate a standard document flow.
In the example, the header and footer are always placed at the top and bottom of the screen, regardless of how p scrolls up or down.
But as originally stated, give body
or html
add one transform: translate3d(0,0,0);
, you try again, you will find that the original position: fixed;
two elements are not obedient, will be scrolling along with the screen.
In fact, position: fixed;
the reference object is not what you call a screen, but an viewport
HTML object, typically a page ( document.documentElement
) generates a viewport.
You document.documentElement.clientHeight
can see the actual height of the viewport, where fixed
the elements are positioned as containers.
After the body (or HTML) adds transform
attributes, the entire body
DOM produces a corresponding transformation, but at this point the "whole" refers only to the body under the standard document flow element, for those position: absolute;
/ position: fixed;
elements, because it has been separated from the body of the document flow, so cannot By the body of the transformation so that they also naturally achieve the corresponding transformation effect.
At this point, the browser in order for such a DOM to get a corresponding change, will produce a new viewport, the viewport as a container for positioning elements exist, will respond to the body of the transform
transformation effect, so that those outside the document flow of the positioned
elements can also be transformed.
This viewport will seriously affect position: fixed;
the location, when it scrolls with the "Buddha" Dom synchronously, it will roll with fixed
elements, this will produce a similar absolute
strange effect:
fixed
Elements appear to be in absolute
a document.documentElement
"invisible" container that is consistent with size.
Extended situation
In some mobile devices (or apps), to the <video>
default playback of the label to open the hard decoding, this will also produce the above phenomenon, the video will "float" on the page, will not be normal scrolling with the page elements.
There are also some lower version of the mobile browser, there will be similar situation, you can try to solve this idea.
Summarize
In fact, the above situation will not only happen body
, an arbitrary DOM added transform
will produce a similar viewport effect, interested in trying to.