ETC/이슈노트

[이슈노트] iOS 이슈 모음 #8 (14 이하에서 gap 이슈)

최근 iOS 14 이하 버전에서 Gap이 적용되지 않는 문제가 발생했다. 😥 이미 모든 작업은 완료된 상태였고, iOS 14.6에서는 문제가 없다고 판단하여 이슈를 놓쳤다. 다행히, 다른 환경에서는 문제가 없었기 때문에 대규모 수정보다는 부분적인 수정을 선택했다. 이를 위해 @supports를 활용하여 iOS에만 해당되는 CSS를 작성하기로 결정했다. 예를 들어, -webkit-touch-callout은 iOS에서만 적용되며, translate: none은 macOS와 iOS의 Safari 14.1 이후부터 적용된다. 따라서 이 두 가지를 결합하여 다음과 같은 @supports 규칙을 만들 수 있다. @supports (-webkit-touch-callout: none) and (not (translat..

[이슈노트] iOS 이슈 모음 #7 (구버전에서 swiper 터치 슬라이드 이슈)

ios 사파리에서 swiper 터치 슬라이드가 작동하지 않음 해결 👉 swiper 다운그레이드 기존: 9.1.0 의 최신 버전 사용 변경: 5.4.3 버전 사용

[이슈노트] iOS 이슈 모음 #6 (letter-spacing, position: sticky, label 텍스트 줄바꿈)

IE가 떠났더니 아이폰 5S 가 기다리고 있는 현실 1. letter-spacing 이슈 텍스트 자간을 letter-spacing으로 조절했는데 아이폰 5S 에서만 안먹는 이슈 발생 text-rendering:optimizeSpeed > 해결 MDN에서는 해당 css를 이렇게 설명한다. optimizeSpeed 브라우저는 텍스트를 그릴 때 가독성과 기하학적 정밀도보다 렌더링 속도를 강조합니다. 커닝과 합자를 비활성화합니다. 왜 letter-spacing 이 안먹었는지 알 수 없으나.. text-rendering:optimizeSpeed 를 넣어주면서 렌더링에 무슨 영향을 끼쳐서... letter-spacing이 먹게 된걸까..? 알 수 없다.. 2. position: sticky 이슈 아이폰5S에서만 안..

[이슈노트] iOS 이슈 모음 #5 (가로모드 여백, 확대)

1. 사파리에서 가로모드일 때, 사이트 양쪽에 여백이 생기는 이슈 이거 뭐람..? 사파리는 왜 자꾸 혼자 놀지..?? 해결 방법은 생각보다 간단하다. 위와 같이 뷰포트에 viewport-fit=cover 를 추가해주면 된다. 참고 : https://webkit.org/blog/7929/designing-websites-for-iphone-x/ Designing Websites for iPhone X The section below about safe area insets was updated on Oct 31, 2017 to reflect changes in the iOS 11.2 beta. webkit.org 2. 사파리에서 확대되는 이슈 ios 에서는 더이상 뷰포트 user-scalable=no 를 ..

[이슈노트] iOS 이슈 모음 #4 (tel)

ios 사파리에서010-1234-5678 걸지 않은 넘버 텍스트에 자동으로 전화 연결이 걸린다.그러면서 내가 적용하지 않은 스타일이 먹히면서 스타일이 어긋날때가 있다. ios 사파리에서는 자기가 봤을 때 전화번호 같으면 바로 스타일과 기능을 강제로 추가하나보다.어쩔때는 좋지만 어쩔때는 필요없는 기능. 그래서 그때는 메타태그에 아래를 추가해주면 된다.

[이슈노트] iOS 이슈 모음 #3 (overflow : scroll, border-radius)

1. overflow : scroll 이 안먹히거나, 이상하게 먹히는 이슈 개인 정보 체크 부분에 있는 상세 부분에 높이값 지정하고 overflow 스크롤 줬는데, 이게 한개일때는 괜찮은데 두개일때 아래에 있는 부분이 이상하다. 처음에 이게 뭔가 싶었는데 사파리에서만 있는 이슈인걸 확인하고 구글에 검색했더니 ... 이게 ios는 touch 값을 지정해 주지 않으면 overflow : scroll의 동작이 자연스럽지 않다고 한다. ios 때문이라도 앞으로 overflow:scroll 사용시 overflow-scrolling : touch를 꼭 사용해야겠다. overflow:scroll; -webkit-overflow-scrolling:touch; 참고 : https://developer.mozilla.or..

[이슈노트] aOS 이슈 모음 #2 (노트10 크롬브라우저 내 가상선택자 이슈)

알 수 없는 이슈가 생겼다. 노트10에서 크롬 브라우저에서 체크박스가 선택이 안되는것이다.. 선택이 안될때도 있고, 선택이 됐는데도 불구하고 체크박스 이미지가 바뀌지 않고... 정말 알 수 없다.. 어렵다... 기존에 check됐을 때 가상선택자에 background를 넣어서 체크할때 none/block 을 시켰는데, 삼성 브라우저에서 가상선택자 block이 됐다가 사라지면 아예 가상 선택자가 사라져버리는 이슈가 발생했다.... 사내 폰에서는 없고 하필 광고주 폰에서 발견된 이슈여서 매우매우 당황ㅠㅠ 가상선택자를 none/block이 아닌 sprite 이미지로 변경 후, background-position 을 수정하는걸로 해결했다. 휴...

[이슈노트] iOS 이슈 모음 #2 (img display:none)

작업 중 마지막 단계인 기기별 확인하기! 메인 컨텐츠를 화면 정 중앙에 맞추고 싶다는 기획자의 요청에 의해 높이를 100vh로 맞추고 컨텐츠는 absolute로 띄었다. 다른 폰에서는 괜찮았는데, 갤럭시 폴드 앞 화면에서 이슈가 생겼다. 메인 컨텐츠에 텍스트 입력 부분이 있었는데, 이 부분에 텍스트를 입력하려고 하자 자판이 올라오면서 자판을 뺀 높이가 100vh로 먹히면서 컨텐츠 위치가 엉망이 되어버렸다. 그래서 어쩔 수 없이 뒤에 투명 이미지를 놓고 컨텐츠를 올렸다. 하지만 탭에서는 컨텐츠에 absolute를 뺀 상태였어서 img를 display:none 시켜야 했었는데, 이게 다른 기기에서는 괜찮은데 아이패드 6세대에서 이미지에 display:none이 안먹는거다... 도대체 이해가 안되서 아이디도 ..

[이슈노트] aOS 이슈 모음 #1 (삼성 브라우저 overflow 이슈)

모바일! html / body에 이벤트를 overflow:hidden을 주고, overflow:inherit를 써서 그 이벤트를 상쇄시킬때 다른 모든 기계와 브라우저에서는 괜찮은데 삼성 브라우저에서는 overflow:inherit가 안먹는다. 아마도 상속받을 속성이 없어서 그런걸까?? 삼성 브라우저 왜구래... 여튼 그래서 overflow:inherit를 overflow:auto로 수정했더니 잘된다~! 해결~

[이슈노트] iOS 이슈 모음 #1 (a link)

iOS 12에서는 p태그에 onclick 걸어도 이벤트가 실행되지 않는다. button이나 a태그로 바꾸거나 cursor: pointrt 속성을 줘야한다.