The impact of CSS3 transform on HTML document flow

Source: Internet
Author: User

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:

fixedElements 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:

fixedElements 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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.