It's a known and long standing problem with background-attachment:fixed when used in conjunction with background-size:cover. They just aren't compatible on mobile.
If you only have one fixed background then you can use position:fixed to place the element and then you don't need background-attachment:fixed. This works well where you have an image on the body and then you can place it using body:after instead as in this example.
However if you want multiple images then this approach cannot be taken. The only suggestion I have is that you remove the background-size:cover for small screen (using media queries) and try to use images that don't need 'cover'.
Apart from possibly scripting the image to be fixed I don't believe there is a solution as this question has been asked many times in the forum.
Are you going to be doing more fixed background images than shown in your codepen?
I'm guessing you will have multiple backgrounds but if the codepen is basically the full version then you could fake those three panels by leaving them transparent and just putting gray borders around the three columns.
e.g. (very roughly)
padding:200px 0 0;
background:url('https://www.w3schools.com/w3css/img_fjords.jpg') center center no-repeat;
border:15px solid gray;
border-bottom:50px solid gray;
width:calc((100% / 3) - 10px);
border:5px solid gray;
Of course we shouldn't be using fixed heights if you are having text content in those panels etc.