'Firefox improperly renders svg background with opacity and background-size: cover

I stumbled upon a weird issue in firefox (MacOS) where opacity is not applied for an SVG background image that is used in :before pseudo-element with background-size cover or higher values than 100%.

In Chrome, the SVG is rendered in the background with 0.05 opacity applied as expected.

In Firefox 98.0.1 on MacOS, it is rendered as black as if no opacity is applied at all. What is weird though is that if I change the background-size to 50% for instance, it is rendered properly. What's more, if I toggle the opacity rule in firebug it renders as expected.

Is it a firefox bug or am I missing something? Any ideas for a workaround?

Codepen: https://codepen.io/wolasso/pen/RwxobEo

Expected result (Chrome, Safari):

enter image description here

Firefox:

enter image description here

.test {
  width: 100vw;
  height: 100vh;
  background: #4C8CB8;
}

.test:before {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDpub25lO3N0cm9rZTojMDAwO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MnB4O308L3N0eWxlPjwvZGVmcz48dGl0bGUvPjxnIGRhdGEtbmFtZT0iMzQwLURvY3VtZW50IEFycm93IERvd24iIGlkPSJfMzQwLURvY3VtZW50X0Fycm93X0Rvd24iPjxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIxMCAxIDQgNyA0IDMxIDI4IDMxIDI4IDEgMTAgMSIvPjxwb2x5bGluZSBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMTAgMSAxMCA3IDQgNyIvPjxwb2x5bGluZSBjbGFzcz0iY2xzLTEiIHBvaW50cz0iMjEgMjEgMTYgMjYgMTEgMjEiLz48bGluZSBjbGFzcz0iY2xzLTEiIHgxPSIxNiIgeDI9IjE2IiB5MT0iMjYiIHkyPSIxMCIvPjwvZz48L3N2Zz4=');
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 200% 200%;
  opacity: 0.05;
}
<div class="test"></div>
csssvgfirefox


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions