토픽 IOS에서의 툴바 메뉴 Top에 붙이기(android포함)
본문
position: -webkit-sticky;
position: sticky;
top: 0;
으로 하면 최신 안드로이드에서 메뉴가 잘 붙어 있네요.
소프트 키보드가 올라오면 아이폰에서는 붙어 있지 않게 되네요..
구글 검색으로 찾아 보니. 스택에.. https://stackoverflow.com/questions/58226087/position-sticky-doesnt-work-when-virtual-keyboard-is-open-in-safari
별도로 Visual Viewport API를 별도로 구현해야 된다고 합니다.
다행히 IOS 13이상부터 지원한다고 합니다.
추천1 비추천 0
댓글목록 4
무와보님의 댓글
무와보
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
아이피
(175.♡.♡.20)
작성일
스택 보니까 생각났습니다.
예전에 Fullscreen Slide를 구현하면서 이 문제 때문에 고생했는데 IOS의 모든 브라우저가 이 문제를 가지고 있고 현재는 IOS>Safari에서 유독 두드러지는 문제라고 알고 있습니다.
응용할만한 소스 하나 투척합니다.
[code]
/*JS way for setting height: 100vh to slides' height*/
const $slides = $(".mwb-owl-full .owl-item");
$slides.css("height", $(window).height());
$(window).resize(() => {
$slides.css("height", $(window).height());
});
[/code]
imerong님의 댓글
ios 13 이전 구세대 기기들과는 호환이 안되겠군요. 참 여러가지 지원한다는게 어려운 일입니다.