반응형

2021-01-13T01:28:30 이라는 문자열을 Date 포맷으로 변경할 때, 다음과 같이 Safari에서의 결과가 잘못 표시되는 현상이 있다.

Firefox
Chrome
Safari

Safari에서는 timezone 값을 Chrome 등 다른 브라우저와 다르게 처리하여 발생하는 것으로 보인다.

해결하려면 국내 기준으로 시간 문자열 뒤에 +09:00를 추가하면 된다.

const datetimeString = '2021-01-13T01:28:30';
new Date(`${datetimeString}+09:00`);

 

하지만 고정 값을 넣는 것이 꺼려진다면 다음과 같이 timezone 값을 입력 시간에 더해주면 된다.

이 경우에는 timezone 식별자인 Z를 시간 문자열 뒤에 추가로 붙여준다.

const datetimeSring = '2021-01-13T01:28:30';
new Date(new Date(`${datetimeString}Z`).getTime() + new Date().getTimezoneOffset() * 60 * 1000);

 

출처: stackoverflow.com/a/54211231/3422425

반응형
반응형

iOS에서 엘리먼트가 의도치않게 위아래로 드래그가 가능한 현상이 있다. 단일 레이어일 경우 그러려니 하고 넘어갈 수 있지만, 메인 레이어를 덮는 오버레이가 있고, 이를 드래그 할 경우 그 아래 깔린 엘리먼트들이 노출되기 때문에 보기에 좋지 않다.

이를 방지하려면 아래와 같이 스타일을 설정하면 된다.

 

position: fixed 엘리먼트의 경우 현상이 발생하지 않으므로 우선 fixed로 설정을 해준다.

html,
body {
  position: fixed;
  overflow: hidden;
}

다음과 같이 최상위 래퍼를 두고,

<html>
…
<body>
  <div class="mainwrapper">
    …
  </div>
</body>
</html>

최상위 래퍼에 스크롤 옵션을 복구한다.

body > .mainwrapper {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* enables “momentum” (smooth) scrolling */
}

 

출처: https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/

반응형

+ Recent posts