Are elements with margin-left -100% still being rendered or does the browser understand that they are outside the "view area" and stop using computer resources?
And when they are with opacity: 0 and / or visibility: hidden , does this also occur?
Yes, it renders.
Proof - link
By CSS I created a transition from margin-left: -100% to margin-left: -150% , and he was able to find the difference, which is written on the screen by Javascript.
So there are 2 different graphics renderings in the browser: Renderint and Painting. Painting is processed when any image is changed on the screen, and Rendering when it is necessary to recalculate some attribute of any element, be the position, the color, the size, etc.
In this case, Rendering recalculates the position of the element, but Painting does not display on the screen, causing it to be rendered by Rendering only.
If you open the Performance tab of Chrome DevTools, you'll notice the difference in Painting's execution if, in the transition, you replace margin-left: -150% with margin-left: 50% , making it display%
