Hello I have a problem with my background-image on Apple devices (iPhone/iPad) My background looks like I want in all the browsers and on Android devices just not on Apple devices

like this in browsers: Safari, Firefox, Chrome, Opera, Edge, IE

like this on Android

and like this on Apple devices

for the HTML it is only a normal <div class="hero"> </div>

this is my CSS (sass)

.hero
    width: 100%
    height: 100%
    position: relative
    background:
        image: url(../image/pics/thailand.jpg)
        position: center
        size: cover
        attachment: fixed

This is the page

I tried already some solutions from "Questions that may already have my answer" but nothing worked for me

Thank you for your help!!!!

I tried a lot solutions and I did not want to use JS so for some reason the property attachment fixed does not work correctly on IOS so I did this for media and now the picture look good it is just not fixed anymore

 @media screen and(max-width:800px)
    .hero
        background:
            attachment: scroll

If somebody brings me an other solution that would make me happy

thank you

more