Во-первых, я заметил, что у вас не только на iphone такая проблема (во всяком случае на ipad грустно). Отрисовка даже на других устройствах явно хромает. И самую сильную проблему тут генерируют тяжелые фильтры с большими значениями. Например:
...
-webkit-filter: blur(420px);
filter: blur(420px);
...
Во-вторых, заметил что у вас используется:
@media screen and (max-width:720px) {
...
}
Хотя даже в bootstrap у вас используется
≥768px , т.е. некоторая часть мобильных девайсов фактически отображает полную версию для десктопа (и со всеми фильтрами).
