position : fixed를 통해 화면 하단에 div가 고정 된 모바일 웹 사이트가 있습니다. 양식이있는 페이지에 올 때까지 iOS 5 (iPod Touch에서 테스트 중)에서 제대로 작동합니다. 입력 필드를 탭하고 가상 키보드가 나타나면 갑자기 내 div의 고정 위치가 손실됩니다. 키보드가 표시되어 있으면 div가 페이지와 함께 스크롤됩니다. 완료를 클릭하여 키보드를 닫으면 div가 화면 하단의 위치로 되돌아 가고 position : fixed 규칙을 따릅니다.
다른 사람이 이런 종류의 행동을 경험 한 적이 있습니까? 이것이 예상됩니까? 감사.
답변
내 응용 프로그램 에서이 문제가있었습니다. 다음은 내가 어떻게 해결하고 있는지입니다.
input.on('focus', function(){
header.css({position:'absolute'});
});
input.on('blur', function(){
header.css({position:'fixed'});
});
상단으로 스크롤하여 거기에 배치하기 때문에 iOS 사용자는 이상한 일이 발생하지 않습니다. 다른 사용자가이 동작을 수행 할 수 없도록이를 일부 사용자 에이전트 감지로 랩하십시오.
답변
가상 키보드가 뷰포트를 화면 밖으로 밀어 올리는 약간 다른 ipad 문제가있었습니다. 그런 다음 사용자가 가상 키보드를 닫은 후에도 여전히 내 뷰포트가 화면을 벗어났습니다. 제 경우에는 다음과 같은 일을했습니다.
var el = document.getElementById('someInputElement');
function blurInput() {
window.scrollTo(0, 0);
}
el.addEventListener('blur', blurInput, false);
답변
이것은 ipad의 문제를 해결하기 위해 사용하는 코드입니다. 기본적으로 오프셋과 스크롤 위치 간의 불일치를 감지하여 ‘고정’이 올바르게 작동하지 않음을 의미합니다.
$(window).bind('scroll', function () {
var $nav = $(".navbar")
var scrollTop = $(window).scrollTop();
var offsetTop = $nav.offset().top;
if (Math.abs(scrollTop - offsetTop) > 1) {
$nav.css('position', 'absolute');
setTimeout(function(){
$nav.css('position', 'fixed');
}, 1);
}
});
답변
위치 고정 요소는 키보드를 켰을 때 위치를 업데이트하지 않습니다. Safari가 페이지 크기가 조정되었다고 생각하도록 유도함으로써 요소의 위치가 변경됩니다. 완벽하지는 않지만 적어도 ‘position : absolute’로 전환하고 변경 내용을 추적하는 것에 대해 걱정할 필요가 없습니다.
다음 코드는 사용자가 키보드를 사용하고있을 때 (입력이 집중되어 있기 때문에) 청취하고 흐림이 들릴 때까지 스크롤 이벤트를 수신 한 다음 크기 조정 트릭을 수행합니다. 지금까지 나를 위해 잘 작동하는 것 같습니다.
var needsScrollUpdate = false;
$(document).scroll(function(){
if(needsScrollUpdate) {
setTimeout(function() {
$("body").css("height", "+=1").css("height", "-=1");
}, 0);
}
});
$("input, textarea").live("focus", function(e) {
needsScrollUpdate = true;
});
$("input, textarea").live("blur", function(e) {
needsScrollUpdate = false;
});
답변
이 문제를 연구하는 동안 누군가 가이 스레드에서 발생하는 경우를 대비하여. 이 글이이 문제에 대한 나의 생각을 자극하는 데 도움이된다는 것을 알았습니다.
이것은 최근 프로젝트에서 이것을위한 나의 해결책이었습니다. “targetElem”의 값을 헤더를 나타내는 jQuery 선택기로 변경하면됩니다.
if(navigator.userAgent.match(/iPad/i) != null){
var iOSKeyboardFix = {
targetElem: $('#fooSelector'),
init: (function(){
$("input, textarea").on("focus", function() {
iOSKeyboardFix.bind();
});
})(),
bind: function(){
$(document).on('scroll', iOSKeyboardFix.react);
iOSKeyboardFix.react();
},
react: function(){
var offsetX = iOSKeyboardFix.targetElem.offset().top;
var scrollX = $(window).scrollTop();
var changeX = offsetX - scrollX;
iOSKeyboardFix.targetElem.css({'position': 'fixed', 'top' : '-'+changeX+'px'});
$('input, textarea').on('blur', iOSKeyboardFix.undo);
$(document).on('touchstart', iOSKeyboardFix.undo);
},
undo: function(){
iOSKeyboardFix.targetElem.removeAttr('style');
document.activeElement.blur();
$(document).off('scroll',iOSKeyboardFix.react);
$(document).off('touchstart', iOSKeyboardFix.undo);
$('input, textarea').off('blur', iOSKeyboardFix.undo);
}
};
};
iOS가 스크롤하는 동안 DOM 조작을 중지하기 때문에 수정이 보류되는 데 약간의 지연이 있지만 트릭을 수행합니다 …
답변
이 버그에 대해 찾은 다른 답변 중 어느 것도 나를 위해 일하지 않았습니다. 페이지를 34px 뒤로 스크롤하여 모바일 사파리가 스크롤하는 양을 간단하게 수정했습니다. jquery로 :
$('.search-form').on('focusin', function(){
$(window).scrollTop($(window).scrollTop() + 34);
});
이것은 분명히 모든 브라우저에서 적용되지만 iOS에서 중단되는 것을 방지합니다.
답변
이 문제는 정말 성가신 일입니다.
위에서 언급 한 기술 중 일부를 결합하고 이것을 생각해 냈습니다.
$(document).on('focus', 'input, textarea', function() {
$('.YOUR-FIXED-DIV').css('position', 'static');
});
$(document).on('blur', 'input, textarea', function() {
setTimeout(function() {
$('.YOUR-FIXED-DIV').css('position', 'fixed');
$('body').css('height', '+=1').css('height', '-=1');
}, 100);
});
두 개의 고정 탐색 표시 줄이 있습니다 (twitter 부트 스트랩을 사용하는 머리글과 바닥 글). 키보드가 작동하면 이상한 반응을 보였고 키보드가 작동하지 않으면 이상한 반응을 보였습니다.
이 시간 지정 / 지연 수정으로 작동합니다. 나는 여전히 결함을 발견하지만 가끔 고객에게 보여주기에 충분할 것 같습니다.
이것이 당신에게 효과가 있는지 알려주세요. 그렇지 않으면 우리는 다른 것을 찾을 수 있습니다. 감사.
