Letters overlapping when setting alpha using color

Question

Below I have 2 div tags with the same text. One sets the font transparency using color , and the other using opacity.

In the 2nd tag, I can see the desired result, but in the first one, I see some letters overlapping with each other and that creates a translucent/opaque effect.

Could anyone explain why this font rendering occurs?

EDIT: The issue occurs in Google Chrome

body{ font-family: Lobster; background: black; }
div{ font-size: 100px; }
div:hover{ color: #fff; opacity: 1; }
.alpha{ color: rgba(255, 255, 255, .3); }
.opac{ color: #fff; opacity: .3; }

<link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
<div class="alpha">Toshio Bando</div>
<div class="opac">Toshio Bando</div>

Answer 1

In chrome this behaviour is handled correctly. As per the CSS specification the opacity property should be treated as a post-processing operation. RGBA on the other hand is intended to render all individual components separately off-screen, blending them together, and then rendering to the DOM with element properties such as opacity applied in post.

However, this issue will be experienced on both elements when viewing in Firefox due to poor implementation of the CSS specification:

Correct rendering within Chrome:

Code for reproducing the issue cross-browser:

body{ font-family: Lobster; background: black; }
div{ font-size: 100px; }

.alpha:hover{ color: rgba(255, 255, 255, 1); }
.alpha{ color: rgba(255, 255, 255, .3); }

.opac:hover{ color: #fff; opacity: 1; }
.opac{ color: #fff; opacity: .3; }

<link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
<div class="alpha">Toshio Bando</div>
<div class="opac">Toshio Bando</div>