You should probably make the article more focused on animation and in such case we cannot use display because it's not animatable so even for animation it's difficult to apply the comparaison.
I still disagree that both opacity:0 and display:none gives the same result. Even if you combine opacity with transform, the element will remain in flow and will still contribute to the layout while it's not the case when using display:none (the element is no more considered in the layout so the browser need to re-render the layout thus it's more expensive than opacity)
opacity and display may lead to the same visual result if and only if the element is out of the flow (position:absolute or position:fixed) and we disable the mouse interaction (using pointer-events:none because we can interact with an element having opacity:0). In such situation we can compare both but in a normal flow we cannot.
I understand the performance comparaison but it's like comparing the performance of a Car with a Plane. It's clear the the Plane is faster than a Car but both aren't used for the same purpose
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
You should probably make the article more focused on animation and in such case we cannot use display because it's not animatable so even for animation it's difficult to apply the comparaison.
I still disagree that both opacity:0 and display:none gives the same result. Even if you combine opacity with transform, the element will remain in flow and will still contribute to the layout while it's not the case when using display:none (the element is no more considered in the layout so the browser need to re-render the layout thus it's more expensive than opacity)
opacity and display may lead to the same visual result if and only if the element is out of the flow (position:absolute or position:fixed) and we disable the mouse interaction (using pointer-events:none because we can interact with an element having opacity:0). In such situation we can compare both but in a normal flow we cannot.
I understand the performance comparaison but it's like comparing the performance of a Car with a Plane. It's clear the the Plane is faster than a Car but both aren't used for the same purpose