[IOS CSS 오류] IOS position: fixed 버그 및 오류 해결방법

안드로이드에서는 잘되는데 ios에서 테스트 시 position: fixed css가 적용되지않아 오류나 버그가 발생하는 경우가 종종 있다.

이 문제의 경우 나뿐만 아니라 수많은 사람들이 경험하는 문제라 구글링시 많이 있긴 하지만, 정답은 없었다...ㅎ

그래도 해결해야하는게 개발자의 숙명이니 열심히 도전하여 성공하였다!

 

나의 경우는 ios에서 스크롤 시 header가 상단에 있지않고 여기저기 자유롭게 움직이는 문제가 있었다.

해결방법은 ios시 position: fixed를 사용하지 않고 top 위치를 계속해서 변경해주었다.

 

[해결한 코드]

//ios 헤더 css 문제해결
//ios 확인
    var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

	if (isIOS) {
    //스크롤시 발생
	    window.onscroll = function() { 
        	//바닥에 둘 경우
	        var iPadPosition = window.innerHeight + window.pageYOffset-45;

	        $("header").css("position", "absolute");
	        $("header").css("top", window.pageYOffset); //상단
	        $("header").css("display", "block");
	      }
	}

 

도움 된 링크 : https://stackoverflow.com/questions/4889601/position-fixed-doesnt-work-on-ipad-and-iphone

 

---

여러가지 방법을 해봤는데 안된 방법이지만 되는 분들이 있을 수 있으니 시도한 방법도 작성해두겠습니다.

단, 해결하기 바빠서 전부는 기록을 못했습니다. ㅠㅠ

[ 1 ]

//방법1
$(function(){
    $("input").each(function(){
        $(this).bind("focus", function(){
            $("header").css("position", "absolute");
        });
        $(this).bind("blur",function(){
            $("header").css("position", "fixed");
        });
    });
});

//방법2
$(function() {
		$("input").each(function() {
			$(this).bind("blur", function() {
				$("header").css("position", "fixed");
				$("header").css("top", "0");
			});
		});
	});

포커스가 없을 경우 css를 fixed 하는 방법인데 똑같이 에러발생

 

[ 2 ]  

//방법1
let lastScroll = 0;
 $(window).scroll(function(){
   let nowScroll = $(this).scrollTop();
   if (lastScroll >= nowScroll || lastScroll < 0){
     // iOS 사파리 bounce effect 시 스크롤 위치 마이너스 할당
     $('header').stop().slideDown(200);
     $('header').style.transform = 'translateY(' + window.scrollY + 'px)';
     $("#test").html("scroll-- : " +lastScroll);
   } else {
     $("#test").html("scroll++ : " +lastScroll);
     $("header").css("position", "fixed");
		$("header").css("top", "0");
     //$('header').stop().slideUp(50);
   };
   lastScroll = nowScroll;
 });
 
 //방법2
 var header = document.querySelector('header'); // 헤더 요소 선택
 var lastScrollTop = 0;

 window.addEventListener('scroll', function() {
     var scrollTop = window.scrollY || window.pageYOffset;

     if (scrollTop > lastScrollTop) {
         // 아래로 스크롤할 때: 헤더 숨기기
         header.style.transform = 'translateY(100%)';
         $("#test").html("scrollTop- : " +scrollTop);
     } else {
         // 위로 스크롤할 때: 헤더 표시
         header.style.transform = 'translateY(0)';
         $("#test").html("scrollTop+ : " +scrollTop);
     }

     lastScrollTop = scrollTop;
 });
 
 //방법3
  var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (isIOS) {
    var element = document.querySelector('.element'); // 대상 요소 선택
    var scrollY = 0;

    window.addEventListener('scroll', function() {
        if (scrollY !== window.scrollY) {
            element.style.transform = 'translateY(' + window.scrollY + 'px)';
            scrollY = window.scrollY;
        }
    });
}

스크롤 시 translateY를 변경하는 방법인데 이 방법도 안 통했다.

 

[ 3 ]

//css 추가
-webkit-transform: translateZ(0);

/* iOS Safari에서 스크롤 동작을 부드럽게 만들기 위한 속성 */
-webkit-overflow-scrolling: touch;

translateZ를 0을 설정해도 해결된 사람이 있길래 해봤지만 에러는 그대로였다.

 

 

더 다양한 방법으로 여러가지 시도를 해봤지만 안되었고, 위에 해결방법으로 겨우 해결하였다!