Как скрыть html элемент на ios?

На ios не получается скрыть элемент при прокрутке страницы. Что нужно сделать чтобы он отрабатывал?
При прокрутке работает изменение бэкграунда меню. А вот лого 1 (белый логотип) не скрывается. Но черный (лого 2) появляется. На Android все ок. Проблема именно на ios как на safari так и на chrome.

Скрипт:

<script>
		var currentScrollPosition = 0;
		$(window).scroll(function() {
			var newScrollPosition = $(this).scrollTop();
			if (newScrollPosition > currentScrollPosition) {
				// меняем класс по скроллу вниз

				$('.logo1').addClass('disable');
				$('.logo1').removeClass('activatble');
				$('.logo2').addClass('activatble');
				$('.logo2').removeClass('disable');

			}
	
			var newScrollPosition2 = $(this).scrollTop();
			if (newScrollPosition2 == 0) {
				// меняем класс по скроллу вверх
				
				$('.logo1').addClass('activatble');
				$('.logo1').removeClass('disable');
				$('.logo2').addClass('disable');
				$('.logo2').removeClass('activatble');

			

			}
			currentScrollPosition = newScrollPosition;
		
		});
		
	</script>

Код:

<a class="navbar-brand  logo1 activatble" href="#"><img src="photos/logo.png" style="height:30px; margin-right:5px;"></a>
<a class="navbar-brand  logo2 disable" href="#box"><img src="photos/logo2.png" class="" style="height:30px; margin-right:5px;"></a>

Css:

.activatble {
	display: contents;
}
.disable {
	display: none!important;
}

Сайт: купить-увлажнитель-воздуха.рф