One of two background images broken on iOS device only

I am completely stumped. This question has lost too many of my hours.

I have two parallax scrolling backgrounds - work great. Adding responsiveness to the site for mobile phones. If I use the mobile chrome simulator works great on every device. If I use it on an Android phone, great ... however on iOS the first background image is applied but the second is not visible at all. All you see is content and a white background. It doesn't make any sense given that they have the same settings - I tried to rename the image by changing the file type of the image using the same image as in background-1 and none of them work. I tried deleting almost all of my codebase to try to debug it from the bottom up - nothing was achieved. The only thing that was noticeable was if I removed .background-1 entirely, then part of the background image .background-2 showsdespite its height 100vh.

To summarize: works great on the simulator, the android phone is great - the iphone is one of two nearly identical divs.

<div class = "background-1"> </div>

<div class = "information">This div contains some information.....</div>

<div class = "background-2"></div>


.background-1, {
    background-image: url("image1.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment: fixed;
    background-blend-mode: lighten;
    background-color: rgba(255,255,255,0.2);
    height:100vh;
    width:100%; 
    position: relative; 
}

.background-2{
        background-image: url("image2.jpg");
        background-size:cover;
        background-repeat:no-repeat;
        background-attachment: fixed;
        background-blend-mode: lighten;
        background-color: rgba(255,255,255,0.2);
        height:100vh;
        width:100%; 
        position: relative; 
    }