I have a banner that is about 450px in height and it has a background image that is set to background-attachment: fixed. I know it doesn't work on iOS so I was wondering if there was a way to use some JS to detect if the webpage is being run on iOS and if so then can it just remove the element from the DOM? Here is my code:

<!--Banner-->
<div class="banner">

</div>

.banner {
    margin-top: 3rem;
    background-image: url(../img/angular/angular-mockup.png);
    width: 100%;
    overflow: visible;
    min-height: 454px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}