Q25: Render Layers

[00:00:00]
>> Question 25, which of the following properties causes the element to be promoted to its own render layer? Is it z-index: 1, translate3d, will-change: transform, transform: rotate(45deg) position: fixed, or position: absolute. The right answers here is B, translate3d. It's also C, will-change: transform, D, transform: rotate, and E, position: fixed.

[00:00:26]
So first, let's just talk about those rendering layers again. So let's say that we just have this very simple page with those four elements. And we want to animate those elements to the middle. Now, what we can do is, with certain GPU accelerated properties, we can essentially create those own layers for these elements that should move like that.

[00:00:46]
So now they're not on the same rendering layer anymore with the yellow in, blue one there on their own layer. So now they can just when they move it's just the layers that move around, it's not the actual elements itself that as we mentioned before it's with the pixels in the layout that it has, like, recalculate every time it's just a smooth transition.

[00:01:04]
This happens on the GPU, so your GPU is made for animation, stuff like that, or it's really good at that. So, this just enables that smoothness to your website. There are certain, [LAUGH] okay, weird transition, but yeah. There are certain elements that will always cause the browser to create a rendering layer.

[00:01:24]
These are some of them. So will-change: transform, position: fixed, opacity, filter, transform. There is also more than this, you also have translate X, Y, 3D stuff we just saw, backface-visibility, hidden, will-change: opacity, a video elements. I believe it's all video elements now. Initially it was just with accelerated decoding, but I'm not sure, I think it's all video elements now, and then we have a WebGL canvas.

[00:01:50]
So, WebGL has all these 3D stuff, it needs to be accelerated. And then also rotations. So rotate y. Maybe I can go back to a front-end master's website. Let's see, probably now it just won't happen. But let's say that, I don't know, we just wanna, say that this wrap here should have a will-change: transform, which doesn't make sense cuz we're not transforming it.

[00:02:18]
I cannot type when I'm live. Where is the layers? Did I remove layers somehow? Lots and more tools, layers. Let's see if it created something for that. Yeah, here. So this is like the element we just promote it to its own layer. And you can see for the compositing reasons, this has a will-change: transform compositing hint.

[00:02:42]
So now, it doesn't make sense to have this in your own layer, cuz we're not animating it or anything, but yeah, this is now its own little layer and it uses almost three megabytes of memory. So, again, it doesn't make sense to do it here but then you can see how these properties affect rendering layers.

[00:03:01]
Cool, makes sense? You just kind of gotta I guess not really remember which properties cause a layer to be promoted, but cuz often it's pretty obvious which ones do for example, with position: fixed it does because it will always kind of stay in the same place on the screen.

[00:03:16]
And otherwise you're scrolling animation will be super janky, cuz on every scroll, your page would have to read layouts to repaint every time, cuz it would having it on a separate layer. This allows these two layers to smoothly kind of move. [LAUGH] This isn't weird, but on top of each other, so yeah.