CSS/HTML border radius issue with fixed backgrounds in Firefox - html

Question

I do not really understand what happens with some basic HTML/CSS code:
The HTML:
<div class="class1">
<div class="class2">
hello
</div>
</div>
The CSS:
.class1
{
height:300px;
background: url('https://www.planwallpaper.com/static/images/kartandtinki1_photo-wallpapers_02.jpg') center no-repeat;
background-size:100% 100%;
background-attachment:fixed;
padding:60px;
}
.class2
{
background: url('https://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg') center no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
border-radius: 100px;
line-height:100px;
color:white;
}
I also did a codepen to "show it live", here.
My issue is that I get some strange "black" at the border radius, and I do not know why. Here are some pics:
At the left I get the expected result with IE11, but at the left I get a strange result with Firefox (latest vers.).
My question is, how can I fix this so both browsers show me the result at the left picture (i.e. get rid of the black)?
Thanks!

Answer 1

You can use this code
body {
margin: 0;
padding: 0;
}
.class1 {
height:969px;
background: url('https://d19m59y37dris4.cloudfront.net/directory/1-3/img/photo/photo-1501621965065-c6e1cf6b53e2.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
background-attachment:fixed;
padding:60px;
}
.class2 {
background: url('https://d19m59y37dris4.cloudfront.net/directory/1-3/img/photo/new-york.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
border-radius: 100px;
line-height:100px;
color:white;
}
<div class="class1">
<div class="class2">hello</div>
</div>