Transitions: transform does not trigger repainting

[Elton-1]

Checks

• [X] This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• [X] I have thoroughly read and understand The Odin Project Contributing Guide
• [ ] Would you like to work on this issue?

Describe your suggestion

The example at performance: https://www.theodinproject.com/lessons/node-path-advanced-html-and-css-transitions#performance, specifies that: "when it comes to rendering our initial transform, we would repaint not only our div element but also every element that is stacked on top of it in the stack context. ", whilst true not adequate for the example.

In your example, the stack context will not get repainted just because the div is hovered. Here's why:

In your CSS, the div element has a transition on the transform property, which means the browser will animate the transformation over 2 seconds with a 1-second delay when the div is hovered. The transform property creates a new stacking context, but it does not trigger a repaint. Instead, it triggers a compositing operation.

i think it would be better if we could replace it with a better example that shows more of this.

Again i may be wrong, but in the previous lessons article it says that transform does not trigger repainting instead it triggers composition operation. I am sorry if i am wrong.

Path

Node / JS

Lesson Url

https://www.theodinproject.com/lessons/node-path-advanced-html-and-css-transitions

[CouchofTomato]

@codyloyd I'd appreciate your input here mate.

[Elton-1]

After some research i came the conclusion this issue is not needed. And the explanation is right.