задний фон(body) не покрывает всю страницу на IOS

Я создал простую страницу используя css flexbox layout.Все работает хорошо с Android телефонами,а вот на Iphone,при скроле,появляется разрыв,к которому применяется только цвет элемента body без картинки заднего фона - svg.Можно,конечно,вставить фиксированный элемент на всю высоту,но этот вариант мне не нравиться.Какие альтернативы для решения моей проблемы?

CSS properties

html {
height: 100%;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
box-sizing: border-box;
background-color: rgba(96.4%, 82.5%, 47.7%, 0.85);
background-image: url("../svg/i-like-food.svg");
background-size: 25px 25px;
display: flex;
flex-direction: column;
}
.flex-container {
flex: 1 0 auto;
width: 100%;
margin-top: 105px;
}
.navbar {
position: fixed;
top: 0;
margin: 0;
background-image: url("../svg/i-like-food.svg");
background-size: 75px 75px;
background-color: rgba(96.4%, 82.5%, 47.7%, 1);
min-height: 105px;
} 
footer {
flex: 0 0 auto;
position: relative;
background-color: rgba(96.4%, 82.5%, 47.7%, 1);
background-size: 75px 75px;
background-image: url("../svg/i-like-food.svg");
}