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 

[![Firefox,Chrome, Opera, Safari, Edge, IE ](https://i.stack.imgur.com/WBdjy.png)](https://i.stack.imgur.com/WBdjy.png)

like this on Android

[![Samsung, LG, Sony](https://i.stack.imgur.com/mbNHj.png)](https://i.stack.imgur.com/mbNHj.png)

and like this on Apple devices 

[![iPhone, iPad](https://i.stack.imgur.com/rbj83.png)](https://i.stack.imgur.com/rbj83.png)

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](http://danyweis.com)

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

Thank you for your help!!!!