Div фиксированный фон в iOS мобильных телефонов и планшетов

Question

Я только что сделал этот сайт (временный адрес): http://www.jsdkqwoj.eu/

У меня есть фиксированный фон в теле, который имеет белый цвет sh, когда он начинает прокручиваться вниз. Когда верхняя панель браузера скрывается и вы прокручиваете вниз, появляется белый флаг sh. Это похоже на «рендеринг» фонового изображения. Это только при использовании сайта с iPhone, а не с инструментами разработчика.

Второе, что сейчас наиболее важно, - как я могу получить фиксированные фоны, работающие в div? Я перепробовал все, что нашел на inte rnet и ничего не работает.

Это DIV html:

<div id="reffadiv-3" class="d-flex">
    <div class="container reffadivi">
        <img class="kari pull-left" height="300px" src="http://www.jsdkqwoj.eu/wp-content/uploads/2020/04/kari-692x800-1.png">
        <div class="reffateksti">
            <div class="orionlogomobiili">
                <img class="pull-left mb-3" height="70px" src="http://www.jsdkqwoj.eu/wp-content/uploads/2020/03/orion-1.png">
            </div>
            <div class="reffajuttu" style="max-width: 600px">
                <p>Orionin ja Granaton yhteistyö alkoi markka-aikaan pienen vinkin kautta. Mikan kanssa on aina ollut mukava asioida, hän on rehellinen ja lupsakka, niin sanottu "vanhan ajan myyntimies". Olemme ajansaatossa hankkineet Granatolta vaatteita, kasseja sekä mainoslahjoja.<br><p style="font-size:80%;">Kari Suomivirta, Sales Manager, Orion Oyj</p></p>
            </div>
        </div>
    </div>
</div>

CSS

#reffadiv-3 {
    width: 100%;
    height: auto;
    background-position:50% 30%;
    background-image: url(http://www.jsdkqwoj.eu/wp-content/uploads/2020/04/tausta_3-scaled.jpg);
    background-size: cover;

    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}
.reffadivi {
    padding-top: 50px;
}
.reffateksti {
    display: flex;
    flex-direction: column;
}
@media only screen and (max-width: 767px) {
    .kari {
        display: none;
    }
    .orionlogomobiili {
        align-self: center;
    }
}