[CSS] iOS에서 fixed element누르면 스크롤 휘리릭 버그

iOS에서 fixed element를 누르면 스크롤이 최상단이나 최하단으로 후루룩 가는 이상한 버그가 있다.

아래 CSS로 간단하게 해결할 수 있다.
(그 전에 나는 focus될때 스크롤 위치 구해서 그 쪽으로 다시 스크롤 옮기는 삽질을 하고 있었다)

html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

하지만 치명적인 단점은 스크롤 이벤트를 더 이상 사용하지 못한다는 거…

$('html, body').animate({
            scrollTop: $($('.review-list .review')[0]).offset().top - 64
        }, 500);

요런 것들이 모두 안 됨.
iOS 웹앱에서 상단 시계 클릭시 최상단으로 가는 기능도 다 막힘.

그래서 결국 뺌.

걍 밑에 select fixed는 input말고 div로 우회하는 걸로…
Naver 웹 브라우저같은 경우는
상단 fixed 검색 창 누르면 전체 페이지에 overlay를 덮으면서 후루룩이 덜 보여지도록 한다(그래도 후루룩 하긴 함)

Refer

http://stackoverflow.com/questions/29001977/safari-in-ios8-is-scrolling-screen-when-fixed-elements-get-focus

Advertisements

[CSS] div에 의도하지 않은 여백이 들어가 있을 때

Problem

btn-container라는 div에 btn-group 3개 div를 넣었더니 그 3개 div 사이에 틈이 생겼다.

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-11-14-%e1%84%8b%e1%85%a9%e1%84%92%e1%85%ae-2-09-25

Solution

  1. whitespace를 주석처리
<div>text</div>
<!-- -->
<div>text</div>
<!-- -->
<div>text</div>
<!-- -->
<div>text</div>
<!-- -->
<div>text</div>
`
  1. 걍 다 붙여버리기.
    django에 {% spaceless %}태그 써도 됨.
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
  1. 잔망스런 엔터
<!-- 1 -->
<div>

text
<div>

text
<div>

text
<div>

text
<div>text</div>
<!-- 2 -->
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
  1. 부모 폰트사이즈 0, 자식에서 다시 키우기
#parent {
font-size: 0;
}

#child {
font-size: 16px;
}
  1. parent를 display: flex 설정하기
.parent {
display: flex;
}
.parent > div {
display: inline-block;
padding: 1em;
border: 2px solid #f00;
}

Refer

http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements/19038875#19038875
(아웃사이더님이 알려주심 감사합니다)