Isn't it better to use RGBA and change only A value?

That's incorrect. Every time something visual changes there has to be a repaint. That's how you can see those changes - the bitmap you are looking at has to be modified, i.e. repainted.

What you are observing is that when you use opacity that is between 0 or 1, you introduce an alpha channel to the element. Chrome will try to optimize this by compositing this element on GPU. The GPU composited layers show up when the "Show composited layer borders" is enabled, but not in "Show paint rectangles", as latter is showing only stuff that is rendered by CPU.

Overall, using non floating opacity is definitely faster.

When elements has a 0 opacity, Chrome can just ignore it when painting. When it is 1, it will just paint. but when it's a floating point, it has to also paint what is behind the element, than composit it on GPU, apply alpha channel, and overlay it. That is a lot more costly than just "ignore" or "paint".

You are doing yourself a disservice and lowering the performance of your site by using floating opacity values when they are not needed.

@darsain, thanks for the heads-up man. I just figure out (the sad way, after my whole website crashed on iOS) that this and many other ways to “prevent” re-paint don't always necessarily mean, more performance. In any case I might update the tip pointing to your comment so more people learn about it.