Pseudo element is not scrollable when it has a transparent background

Question

I have some text displaying in an ::after psuedo element that I would like to be scrollable. It works fine until I change the background of that element from:

background-color: rgb(0,0,0);

to:

background-color: rgba(0,0,0,0.5);

Is there a way to allow scrolling with a transparent background?

---

Here is the HTML with working and broken example:

<div class="wrapper">

  <div class="column working">
    <p>Working: text is scrolling properly.</p><br>
    <div class="container">
      <img src="https://source.unsplash.com/random/400x200" />
    </div>
  </div>

  <div class="column broken">
    <p>Broken: text is not scrolling.</p><br>
    <div class="container">
      <img src="https://source.unsplash.com/random/400x200" />
    </div>
  </div>

</div>

And the CSS to go with it:

* {
  margin: 0;
  padding: 0;

}

.wrapper {
  display: flex;
}

.column {
  padding: 1rem;
  background: yellowgreen;
}

.container {
  display: inline-block;
  position: relative;
  font-family: monaco;
}

.container::after {
  content: "Dis iusto aliquid sollicitudin iaculis modi fugit, non irure quisquam molestiae arius laboris, eiusmod? Pulvinar eleifend volutpat, quae nunc magnam? Hac, nam? Dignissimos esse diamlorem dolore accusamus dolores, ipsa facilis ullam illo, fames ex? Maecenas tellus. Aspernatur eum malesuada, assumenda, hac, ultricies? Aliquet in, harum fugiat! Volutpat recusandae! Fames saepe fames corrupti.";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: inherit;
  height: inherit;
  padding: 1rem;
  z-index: 10;
  overflow-x: scroll;
  cursor: pointer;
  font-family: monaco;
  line-height: 1.5em;
  color: aqua;
}

.column.working .container::after {
  background-color: rgb(0,0,0);
}

.column.broken .container::after {
  background-color: rgba(0,0,0,0.5);
}

img {
  display: block;
}

p {
  font-family: monaco;
}

And here is the above code, in a CodePen

Thanks.

Answer 1

As suggested, this appears to be a browser bug that has since been fixed. Marking as resolved.